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/