引导程序导航图标

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

您可以使用bootstrap已经内置的功能折叠导航栏，这样您就不会遇到很多麻烦，您可以阅读此链接上导航栏的完整文档：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/