Bootstrap 导航栏移动展开按钮不起作用答案

【问题标题】：Bootstrap Nav Bar Mobile Expand Button Not WorkingBootstrap 导航栏移动展开按钮不起作用
【发布时间】：2016-11-20 08:44:19
【问题描述】：

所以我正在使用这个引导导航栏。调整宽度时，窗口低于大约 767px 左右，它会占用所有导航栏链接并改为显示展开按钮。基本上适用于移动用户。这是正确的行为，也是我所期待的。

但是当点击那个新的移动展开按钮时，什么也没有发生。我希望它展开并显示一个菜单，其中包含在导航栏中删除的所有链接。例如this page。当将窗口的宽度调整为更小时，它会创建该按钮并且它是可点击的。这就是我想要实现的目标。

我创建了一个codepen here。我还在下面列出了我的代码的一个小 sn-p。但是codepen 提供了一个更好的交互示例来说明正在发生的事情。任何想法我做错了什么以及为什么该展开按钮不可点击？

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">My App</a>
</div>

【问题讨论】：

您可能还需要加载 jQuery 库。以下链接的答案可能会有所帮助。 stackoverflow.com/questions/38189481/…
@GoMega54 这行得通，但该答案中的链接顺序似乎是错误的。正如 Dejan Lacmanovic 所说，还需要指向导航菜单的容器。随时提交答案，我会投赞成票:)

标签： html css twitter-bootstrap

【解决方案1】：

data-target="#navigationbar"

应该指向您的导航菜单容器。

所以，在你的情况下，它应该是：

data-target="#bs-example-navbar-collapse-1"

【讨论】：

这行得通，但还需要像 GoMega54 所说的那样添加 jQuery 库和引导 js。感谢您的帮助！

【解决方案2】：

您需要加载 jQuery 库和 Bootstrap JS 库才能使下拉菜单在移动屏幕上运行。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：