因此，我正在使用Bootstrap建立我的网站。对于大屏幕，我想显示带有按钮的导航栏。但是，当它到达中型和以下尺寸的屏幕时，我希望它折叠起来，只显示那个小菜单按钮。到目前为止，我已经有了这段代码。菜单图标应有其应有的样子。当我单击菜单图标时，它什么也没做。什么都没发生。
的HTML
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
<span class="sr-only pull-right">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-primary navbar-btn"><a href="index.html">Home</a></button></li>
<li><button type="button" class="btn btn-primary navbar-btn"><a href="description.html">Description</a></button></li>
<li><button type="button" class="btn btn-primary navbar-btn"><a href="gallery.html">Gallery</a></button></li>
<li><button type="button" class="btn btn-primary navbar-btn"><a href="location.html">Location</a></button></li>
<li><button type="button" class="btn btn-primary navbar-btn"><a href="availability.html">Availability</a></button></li>
<li><button type="button" class="btn btn-primary navbar-btn" style="margin-right:0px;"><a href="rates.html">Rates</a></button></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
可以在这里找到代码：http : //jsfiddle.net/nih5/9D4qj/
解决方案根据您的jsfiddle代码。
请使用此代码
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9" >
代替
<div class="collapse navbar-collapse visible-lg">
在css文件中添加类
.navbar-collapse.collapse.in { display: block !important; }
希望这对你有帮助
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句