在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>