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

您应该使用data-target属性绑定导航栏按钮。例如，我将ID设置为target_id。

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target_id">
            <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 id="target_id" 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>

Answer 2

这一行：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">

有一个定位ID的数据目标 - 应在此行应用ID：

<div class="collapse navbar-collapse">

Answer 3

解决方案根据你的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; }

希望这个能帮到你

我的Bootstrap导航栏无效

3 个答案:

please check the demo