Twitter Bootstrap導航欄右側對齊鏈接

新引導並試圖與rails一起使用它。我試圖創建一個導航欄，並試圖顯示一個鏈接到最不正常的導航欄的最右側。這裏是我的代碼：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 

    <ul class="nav"> 
     <li class="active"> 
     <%= link_to "Rubyblog", root_path, :class => 'brand' %> 
     </li> 

     <li> 
     <a href="#">Edit Account</a> 
     </li> 

     <li> 
     <a href="#">Categories</a> 
     </li> 

     <ul class = "nav pull-right"> 
      <a href="#">Current User</a> 
     </ul> 

    </ul> 

</div>

我想顯示的最後一個環節「當前用戶」的導航欄的最右邊。使用div類「導航拉右」似乎並沒有工作：http://i.imgur.com/BEBcaIc.png

請讓我知道我失蹤/做錯了什麼。欣賞你的投入。

謝謝！邁克

編輯：回答我的問題：

拉到「導航右拉式」開出主「導航」類的標籤和它的工作。更新代碼：

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
<div class="container"> 

<ul class="nav"> 
    <li class="active"> 
    <%= link_to "Rubyblog", root_path, :class => 'brand' %> 
    </li> 

    <% if user_signed_in? %> 

     <li> 
     <%= link_to 'Edit Account', edit_user_registration_path %> 
     </li> 

     <li> 
     <%= link_to 'Categories', categories_path %> 
     </li> 

     <% if current_user.has_role? :admin %> 
     <li> 
      <%= link_to 'Users', users_path %> 
     </li> 
     <%end%> 
    <%else%> 
     <li> 
     <%= link_to 'Sign up', new_user_registration_path %> 
     </li> 
    <% end %> 
</ul> 

    <ul class = "nav pull-right"> 
     <li><%= link_to 'Welcome, '+current_user.name, edit_user_registration_path %></li> 
    </ul>

來源

2013-11-10 Mike G

您是否嘗試過做類似下面的當前用戶：它失去它的造型

<li class="pull-right"> 
    <a href="#">Current User</a> 
</li>

我敢肯定的原因是因爲你在裏面築巢nav一個nav。

來源

2013-11-10 02:43:13 jmcharnes

我做了，這也不起作用。鏈接看起來不錯，但它並沒有被定位在最右端：http://i.imgur.com/A3jtFqZ.png –

我想你想的導航欄分爲navbar-left和navbar-right：

<nav class="navbar navbar-fixed-top" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <div class="navbar-inner"> 

     <ul class="nav navbar-nav"> 
     <li class="active"> 
     <%= link_to "Rubyblog", root_path, :class => 'brand' %> 
     </li> 

     <li> 
     <a href="#">Edit Account</a> 
     </li> 

     <li> 
     <a href="#">Categories</a> 
     </li> 
     </ul> 

     <ul class = "nav navbar-nav navbar-right"> 
     <a href="#">Current User</a> 
     </ul> 

    </div> 
    </div> 
</nav>

的bootstrap docs說起這，說他們比pull-right有點不同 - 這或許可以解釋爲什麼你看到的問題。我沒有測試過上述內容，但這可能是一個好的開始。

來源

2013-11-10 02:53:08 CDub

這不工作：http://i.imgur.com/PZIdSgh.png –

我更新了我的帖子試圖更加完整。再次，我沒有測試它，但它應該讓你更接近。 – CDub

編輯：回答我的問題：

拉到「導航右拉式」開出主「導航」類的標籤和它的工作。在我的問題的編輯部分更新代碼

來源

2013-11-10 03:29:07

Twitter Bootstrap導航欄右側對齊鏈接

回答

相關問題