引导导航图标

Question

我使用自举程序进行编码，并且具有响应性的左侧导航。 看起来像：

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