我是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.
最满意答案
你去: http : //jsfiddle.net/AndrewL32/8uJVN/143/
您所要做的就是隐藏所有屏幕尺寸的列表项目,除了您希望它出现的列表项目:
<li class="hidden-sm hidden-md hidden-lg"><a href="#">Another Mobile Item</a></li>Here you go: http://jsfiddle.net/AndrewL32/8uJVN/143/
All you have to do is hide the list-item(s) in all screen-size except the one where you want it to appear:
<li class="hidden-sm hidden-md hidden-lg"><a href="#">Another Mobile Item</a></li>更多推荐
发布评论