在Bootstrap 3中摺疊導航欄？

Question

我有一個頭部分的內部導航，因爲頭類有一個圖像背景圖像設置在CSS看起來令人印象深刻。問題是導航摺疊擴展標題，並推動也在標題部分內的非導航內容。 有沒有辦法讓崩潰菜單顯示在它的父div上面時崩潰，而不是將內容按下頁面並展開我的頁眉區域？

請你能告訴我如何摺疊所有其他內容的導航欄？

Answer 1

下面是一個例子，顯示瞭如何擁有任何種類的'vanilla bootstrap'NAVBAR配置，你可能想要的。它包含網站標題，左側或右側對齊的摺疊和非摺疊菜單項以及靜態文本。請務必閱讀評論以更全面地瞭解您可以改變的內容。請享用！

小提琴：http://jsfiddle.net/nomis/n9KtL/1/

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 

    <!-- Title --> 
    <div class="navbar-header pull-left"> 
     <a href="/" class="navbar-brand">GNOMIS</a> 
    </div> 

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> 
    <div class="navbar-header pull-right"> 
     <ul class="nav pull-left"> 
     <!-- This works well for static text, like a username --> 
     <li class="navbar-text pull-left">User Name</li> 
     <!-- Add any additional bootstrap header items. This is a drop-down from an icon --> 
     <li class="dropdown pull-right"> 
      <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li> 
       <a href="https://stackoverflow.com/users/id" title="Profile">Profile</a> 
      </li> 
      <li> 
       <a href="/logout" title="Logout">Logout </a> 
      </li> 
      </ul> 
     </li> 
     </ul> 

     <!-- Required bootstrap placeholder for the collapsed menu --> 
     <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
    </div> 

    <!-- The Collapsing items   navbar-left or navbar-right --> 
    <div class="collapse navbar-collapse navbar-left"> 
     <!--      pull-right keeps the drop-down in line --> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="/news">News</a></li> 
     <li><a href="/Shop">Shop</a></li> 
     </ul> 
    </div> 

    <!-- Additional navbar items --> 
    <div class="collapse navbar-collapse navbar-right"> 
     <!--      pull-right keeps the drop-down in line --> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="/locator">Locator</a></li> 
     <li><a href="/extras">Extras</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>