Javascript Bootstrap 4 导航栏折叠不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47329694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 navbar collapse not working
提问by Sebastian Alexander Neve White
I am trying to implement a Navbar using Bootstrap 4. Currently, the Navbar correctly collapses when the viewport is shrunk to mobile size. However, when attempting to toggle menu, nothing happens. The jsFiddle example demonstrates this behavior. I have attached the HTML as well.
我正在尝试使用 Bootstrap 4 实现导航栏。目前，当视口缩小到移动尺寸时，导航栏会正确折叠。但是，当尝试切换菜单时，没有任何反应。jsFiddle 示例演示了这种行为。我也附上了 HTML。
Steps I have taken:
我采取的步骤：
- Removing all custom CSS
- Ensuring jQuery link is before Bootstrap JS file
- Script tags in the header and the footer
- Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)
- Ensuring that JS is being used in the Chrome browser
- Validated HTML using WC3 validator
- And of course, read various posts on SO about this issue but none lead to a resolution
- 删除所有自定义 CSS
- 确保 jQuery 链接在 Bootstrap JS 文件之前
- 页眉和页脚中的脚本标签
- 复制并粘贴 Bootstrap Docs 中的确切示例（我得到相同的行为）
- 确保在 Chrome 浏览器中使用 JS
- 使用 WC3 验证器验证的 HTML
- 当然，请阅读有关此问题的 SO 上的各种帖子，但没有一个会导致解决
jsFiddle link https://jsfiddle.net/u7v5jba9/
jsFiddle 链接https://jsfiddle.net/u7v5jba9/
<title>
Site title
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fa fa-globe" aria-hidden="true"></i> Brand Name
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
<li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link ">Sign In</a></li>
<li class="nav-item"><a href="#" class="nav-link ">Register</a></li>
<li class="nav-item"><a href="#" class="nav-link ">Log Out</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<nav class="navbar navbar-inverse fixed-bottom text-center">
<h6 class="text-light text-center">Footer</h6>
</nav>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
Thanks in advance
提前致谢
回答by Ashley Brown
You need to include Popper as per the Getting Started Docs.
您需要根据入门文档包含 Popper 。
Use these for your scripts instead.
将这些用于您的脚本。
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphRtheitroadBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Updated working Fiddle: https://jsfiddle.net/u7v5jba9/1/
更新工作小提琴：https: //jsfiddle.net/u7v5jba9/1/
Advice: In future, always open the dev inspector console in your browser to find any error messages.
建议：以后，请始终在浏览器中打开开发检查器控制台以查找任何错误消息。
回答by smoore4
You can also change the bootstrap reference to the bundled version - bootstrap.bundle.min.js - which includes popper.js.
您还可以将引导程序引用更改为捆绑版本 - bootstrap。捆绑.min.js - 包括 popper.js。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Fiddle: https://jsfiddle.net/smoore4/m2dLp71q/
小提琴：https: //jsfiddle.net/smoore4/m2dLp71q/
As @Anand Rockzz correctly points out, you still need to add jQuery before this reference.
正如@Anand Rockzz 正确指出的那样，您仍然需要在此引用之前添加 jQuery。
回答by abhi varshi
This happens when you miss the order of scripts. You should always include scripts in this order
当您错过脚本顺序时会发生这种情况。您应该始终按此顺序包含脚本
- jquery.js
- popper.js
- bootstrap.js
- jquery.js
- popper.js
- 引导程序.js
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
