Bootstrap導航圖標

Question

我使用bootstrap進行編碼，並且我有響應式左側導航。 樣子：

<div class="col-md-2"> 
      <ul class="nav list-group"> 
        <li class="blue"><a class="list-group-item" href="#">Link 1</a></li> 
        <li class="reddy"><a class="list-group-item" href="#">Link 2</a></li> 
        <li class="violet"><a class="list-group-item" href="#">Link 3</a></li> 
        <li class="orange"><a class="list-group-item" href="#">Link 4</a></li> 
      </ul> 
    </div> 

如何添加點擊下拉圖標在頂部，當屏幕太小？ 我該怎麼做？

Answer 1

可以使用自舉已經內置功能的摺疊導航欄，所以你沒得到了很多的麻煩，你可以閱讀這個鏈接的導航酒吧完整的文檔：http://getbootstrap.com/components/#navbar
正如你所看到的，你也可以在摺疊時修改寬度。

爲您的代碼，這裏是一個快速修改一個我做了，因此崩潰：

<div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#data-to-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> 
    <div class="col-md-2 collapse navbar-collapse" id="data-to-collapse"> 
     <ul class="nav list-group"> 
      <li class="blue"><a class="list-group-item" href="#">Link 1</a></li> 
      <li class="reddy"><a class="list-group-item" href="#">Link 2</a></li> 
      <li class="violet"><a class="list-group-item" href="#">Link 3</a></li> 
      <li class="orange"><a class="list-group-item" href="#">Link 4</a></li> 
     </ul> 
    </div> 
</div> 

這是對的jsfiddle：http://jsfiddle.net/7nfat3sn/7/