Twitter Bootstrap：只摺疊某些菜單項到下拉

Question

我想知道如何創建一個Twitter Bootstrap navbar摺疊該菜單中的項目，在調整瀏覽器窗口的大小時一次或兩個項目。

我見過的大多數導航欄都將整個導航欄合併爲一個下拉菜單;當窗口大小調整時，基本上隱藏了該導航欄上的所有內容。但我需要它仍然透露一些菜單項;所以部分崩潰。

這裏是我的意思（以下菜單）的例子：

首頁|關於|服務|訂單|聯繫

當瀏覽器窗口從右邊調整，我希望它做的是把最後一個菜單項（或兩個）到下拉這樣的話它會是這樣的：

首頁|關於|服務|更多

    -> Order 
        -> Contact 

「更多」需要自動爲下拉菜單中創建並自動列出「訂單」，在下拉菜單中選擇「聯繫人」菜單項。隨着窗口變小，該導航欄中的更多項目將添加到該下拉菜單中。當瀏覽器窗口調整爲全屏寬度時，導航欄會恢復正常。這是需要的。

在我看過的很多鏈接中，我找到了一些鏈接（並不是將整個導航欄放到一個下拉菜單中），但仍像所有其他鏈接一樣，它不會執行我所做的操作描述：

1. http://jsfiddle.net/caio/gvw7j/embedded/result/
2. Twitter Bootstrap Multilevel Dropdown Menu

什麼是實現我需要使用上述任何例如什麼是最好的辦法嗎？

Answer 1

首先，確定哪些導航項應該在每個寬度斷點處「消失」。然後，添加正確的hidden- *類以基於當前斷點隱藏導航項。

我的解決方案要求您複製一些導航項目，但使用hidden- *類設置其可見性，以便它們僅在適當的寬度斷點處顯示。

基本上，當瀏覽器變得更窄時，導航條目將隱藏在主導航欄中，相關導航條目將顯示在下拉菜單中。我的例子有導航項目隱藏在四個默認寬度斷點中的每一箇中。

<nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="/" class="navbar-brand">Brand Name</a> 
    </div> 
    <div id="navbar-menu" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <!--- Include all menu items, below, regardless of display width. ---> 
      <!--- This allows the full menu to be displayed on extra-small (xs) devices. ---> 
      <!--- Hide menu items depending on the available display width. ---> 
      <li><a href="/calendar/">Calendar</a></li> 
      <li><a href="/journal/">Journal</a></li> 
      <li><a href="/shows/">Shows</a></li> 
      <li><a href="/venues/">Venues</a></li> 

      <!--- Hide the following menu items depending on the available display width. ---> 
      <!--- Menu items that can't fit on the main nav bar will be displayed in the "More" dropdown menu. ---> 
      <li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li> 
      <li class="hidden-sm"><a href="/tasks/">Tasks</a></li> 
      <li class="hidden-sm hidden-md"><a href="/songs/">Songs</a></li> 
      <li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">Artists</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">Cities</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">Reports</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="https://stackoverflow.com/users/">Users</a></li> 

      <!--- The "More" dropdown menu item will be hidden on extra-small displays. ---> 
      <li class="dropdown hidden-xs"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li> 
        <li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li> 
        <li class="hidden-lg"><a href="/songs/">Songs</a></li> 
        <li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li> 
        <li class="divider hidden-lg"></li> 

        <!--- These menu items will only appear in the "More" dropdown menu. ---> 
        <li><a href="/artists/">Artists</a></li> 
        <li><a href="/categories/">Categories</a></li> 
        <li><a href="/cities/">Cities</a></li> 
        <li><a href="/reports/">Reports</a></li> 
        <li><a href="https://stackoverflow.com/users/">Users</a></li> 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span> Sign Out</a></li> 
     </ul> 
    </div> 
</div>