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/

Bootstrap导航图标

1 个答案: