默认情况下,移动容器下拉列表中的链接位于左侧(如下所示):
有没有办法让他们出现在右边而不是左边?我尝试使用text-align:right;
但它没有显示干净:
默认情况下,移动容器下拉列表中的链接位于左侧(如下所示):
有没有办法让他们出现在右边而不是左边?我尝试使用text-align:right;
但它没有显示干净:
例如,您可以创建自己的类.align-right
并将其添加到.nav-collapse
容器中以使链接向右对齐。这样,您的更改不会影响依赖于引导样式表上该类的其他元素。尝试这个:
.nav-collapse.align-right {
text-align:right;
}
然后你可以这样做:
<div class="nav-collapse align-right"> ..links.. </div>
您的链接将被放置在右侧。
演示:http: //jsfiddle.net/PWFSX/
从引导文档: http: //getbootstrap.com/components/#navbar
你必须使用这些类“navbar-form navbar-left
我是这样使用它们的:
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="span10"></span>
</button>
<%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
<ul class='nav navbar-nav navbar-right'>
<% if user_signed_in? %>
<li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li>
<% else %>
<li><%= link_to 'Sing in', new_user_session_path %> </li>
<% end %>
</ul>
</div>
</div>