bootstrap 3：侧导航栏崩溃到顶部导航栏

Question

我不认为我正确措辞，所以让我详细说明我试图让我的侧导航栏折叠成一个按钮，作为顶级按钮导航栏功能，所以这[实际上是导航药片];

left sidebar http://i59.tinypic.com/msyrdg.png

但坍缩成这个到报头标签：

hamburger http://i59.tinypic.com/14toiv4.png

与此收存箱功能的顶部。

目前我的代码有下拉出现边栏将

这里是我使用的代码，我已经比颜色的变化之外，没有其他自定义CSS调整。

<header class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <h1 class="brand"><a href="index.html">bootstrap</a></h1> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    </nav> 
</header> 
<div class="container"> 
    <div class="row"> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><!--aside--> 
     <aside> 
     <div class="collapse navbar-collapse" id="collapse"> 
     <h4>Menu</h4> 
      <ul class="nav nav-pills nav-stacked"> 
      <li><a href="#">home</a></li> 
      <li><a href="#">about</a></li> 
      <li><a href="#">gallery</a></li> 
      <li><a href="#">CV</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
     </aside> 
    </div> 

希望这是有道理的谢谢！

Answer 1

发现的可见和隐藏的类此工作

<header class="container"><!--header--> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <nav class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <h1 class="brand"><a href="index.html">John Doe</a></h1> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     </nav> 
    </div> 
    </div> 
    <div class="collapse navbar-collapse" id="collapse"> 
    <ul class="nav navbar-nav visible-xs"> 
     <li><a href="gallery1.html">project 01</a></li> 
     <li><a href="gallery2.html">project 02</a></li> 
     <li><a href="gallery3.html">project 03</a></li> 
     &nbsp; 
     <li><a href="cv.html">About</a></li> 
     <li><a href="#" target="_blank">link</a></li> 
     <li><a href="mailto:info@you.com">Contact</a></li> 
    </ul> 
    </div> 
</header><!--header--> 
<div class="container"><!--content area--> 
    <div class="row"> 
    <aside class="col-lg-3 col-md-3 col-sm-3"><!--aside--> 
     <div class="collapse navbar-collapse" id="collapse"> 
     <ul class="nav nav-pills nav-stacked hidden-xs"> 
      <h4>Works</h4> 
      <li><a href="gallery1.html">project 01</a></li> 
      <li><a href="gallery2.html">project 02</a></li> 
      <li><a href="gallery3.html">project 03</a></li> 
      &nbsp; 
      <li><a href="cv.html">About</a></li> 
      <li><a href="#" target="_blank">link</a></li> 
      <li><a href="mailto:info@you.com">Contact</a></li> 
     </ul> 
     </div> 
    </aside><!--aside-->