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