如何向导航栏按钮添加更多项目(How to add more items to a navbar button)

我是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链接。现在修复了。

I'm a beginner at bootstrap. Please bear with me.

How do I add more items to the button that appears on smaller screen sizes in the following code? Right now, the nav links are the content of the button. I would like to have more items that appear in the list when the button appears.

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

The fiddle is below:

http://jsfiddle.net/2sf7p510/

Thank you so much for your assistance.

edit - sorry, I gave the wrong jsfiddle link. Fixed now.