将移动引导链接移动到右侧

Question

默认情况下，移动容器下拉列表中的链接位于左侧（如下所示）：

有没有办法让他们出现在右边而不是左边？我尝试使用text-align:right;，但它没有显示干净：

Answer 1

您可以创建自己的类，例如.align-right并将其添加到.nav-collapse容器，以将链接对齐到右侧。这样，您的更改不会影响在引导程序样式表上依赖该类的其他元素。试试这个：

.nav-collapse.align-right {
    text-align:right;
}

然后你可以这样做：

<div class="nav-collapse align-right"> ..links.. </div>

您的链接将放在右侧。

演示：http://jsfiddle.net/PWFSX/

Answer 2

来自Bootstrap文档： 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>