Bootstrap：如何在導航欄摺疊中創建其他菜單項

Question

我想在Bootstrap中創建自定義導航欄。

我想實現四件事情：

1的資產淨值的右對齊鏈接導航鏈接的

2文本居中對齊時，導航欄擴大

3文本右對齊當導航欄摺疊

和NAV鏈接（這是困難的部分）：

4個附加NAV時導航欄是示出鏈接展開時摺疊但未顯示。

<div class="navbar"> 
    <div class="navbar-inner"> 
        <div class="ps-content"> 
         <button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <div class="brand">Navigation</div> 
         <!-- PS RHS menu items --> 
         <div class="visible-tablet pull-right"> 
          <ul class="nav"> 
          <li class="active"><a href="#link_1">Active link</a></li><li class="divider-vertical"></li> 
          <li><a href="#link_2">Second link</a></li><li class="divider-vertical"></li> 
          <li><a href="#link_3">Third link</a></li> 
         </ul> 
         </div> 
         <div class="nav-collapse pull-right "> 
          <ul class="nav pull-right "> 
          <li class="active"><a href="#link_1">Actives link</a></li><li class="divider-vertical"></li> 
          <li><a href="#link_2">Second link</a></li><li class="divider-vertical"></li> 
          <li><a href="#link_3">Third link</a></li> 


          </ul> 
         </div> 

        </div> 
       </div>   



    </div> 

的jsfiddle這裏：http://jsfiddle.net/robmc/M43fK/4/

我已經成功地取得了1和2，我相信有一些簡單的CSS的標記，我失蹤了3，但它的4點，我難倒。我還沒有看到這在其他地方嘗試過。有任何想法嗎？

感謝

Answer 1

問題3，你可以使用<li class="text-right">。

對於問題4（僅在導航欄摺疊時才顯示的鏈接），有幾種不同的方法。一種方法是使用隱藏桌面隱藏平板類（因爲你已經在使用visible- *）

<ul class="nav hidden-desktop hidden-tablet"> 
    <li><a href="#link_1">Collapsed link</a></li> 
</ul> 

Bootply Demo

編輯 - 引導3更新三大類名，取決於你想隱藏的尺寸：.hidden-sm，.hidden-md，.hidden-lg（Bootstrap 2 to 3 migration guide）