Question

我是bootstrap的初学者。请耐心等待。

如何在以下代码中的较小屏幕尺寸上显示的按钮中添加更多项目？现在，导航链接是按钮的内容。当按钮出现时，我希望列表中出现更多项目。

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Nav Bar</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
       </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Emergency</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Skip to Content</a></li>
        </ul>
    </div>

</div>

小提琴如下：

http://jsfiddle.net/2sf7p510/

非常感谢您的协助。

编辑 - 抱歉，我给了错误的jsfiddle链接。现在修好了。

Answer 1

在这里：http://jsfiddle.net/AndrewL32/8uJVN/143/

您需要做的就是隐藏所有屏幕尺寸的列表项目，除了您希望它出现的列表项目：

<li class="hidden-sm hidden-md hidden-lg"><a href="#">Another Mobile Item</a></li>

如何向导航栏按钮添加更多项目

1 个答案: