2

默认情况下,移动容器下拉列表中的链接位于左侧(如下所示):

在此处输入图像描述

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

在此处输入图像描述

4

2 回答 2

1

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

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

然后你可以这样做:

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

您的链接将被放置在右侧。

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

于 2012-06-10T11:46:48.813 回答
0

从引导文档: 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>
于 2014-03-09T19:58:19.137 回答