html - 我的 Bootstrap 导航栏不工作

Question

所以我正在使用 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/

Answer 1

根据您的 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; }

希望对你有帮助

please check the demo