Bootstrap 4导航栏崩溃不起作用
我正在尝试使用Bootstrap
4实现导航栏。当前，当视口缩小到移动尺寸时，导航栏会正确折叠。但是，当尝试切换菜单时，没有任何反应。jsFiddle示例演示了此行为。我也附上了HTML。
我已采取的步骤：
- 删除所有自定义CSS
- 确保jQuery链接位于Bootstrap JS文件之前
- 页眉和页脚中的脚本标签
- 复制并粘贴Bootstrap文档中的确切示例（我得到的行为相同）
- 确保JS在Chrome浏览器中正在使用
- 使用WC3验证器验证HTML
- 当然，请阅读有关此问题的各种文章，但没有一篇文章可以解决
<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>
提前致谢
问题答案：
您需要根据“ 入门文档”包括Popper 。
请改用这些脚本。
<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-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 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>
建议：以后，请始终在浏览器中打开开发人员检查器控制台以查找任何错误消息。
-
主要内容：实例,垂直导航栏,实例,居中对齐的导航栏,实例,不同颜色导航栏,实例,品牌/Logo,实例,实例,折叠导航栏,实例,导航栏使用下拉菜单,实例,导航栏的表单与按钮,实例,实例,导航栏文本,实例,固定导航栏,实例,实例导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class="na
-
主要内容：实例,导航对齐方式,实例,垂直导航,实例,选项卡,实例,胶囊导航,实例,导航等宽,实例,胶囊下拉菜单,实例,选项卡下拉菜单,实例,动态选项卡,实例,胶囊状动态选项卡,实例如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: 实例 <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Li
-
问题内容： 我有bootstrap v3。 我在菜单上使用时，它不会切换。我知道该如何使用并建立点击功能，但我认为该功能应包含在引导程序中？那么也许是JavaScript问题？ 这是我包含的js / css / bootstrap文件的标头： 这是我的代码： 我可以正确设置吗？ （在不相关的注释上，但可能相关吗？当菜单移动时，我单击菜单按钮，它将折叠。尽管再次按下并不会使其崩溃。因此，此问题与另一
-
我在bootstrap 4中制作了手风琴折叠。它可以工作，但不流畅有人知道如何解决这个问题吗？我尝试制作另一个div并将div放在里面，但什么都没有。这是代码。谢谢！
-
问题内容： 当前，当浏览器宽度降至768px以下时，导航栏将变为折叠模式。我想将此宽度更改为1000px，所以当浏览器低于1000px时，导航栏将变为折叠模式。我想在不使用LESS的情况下执行此操作，而是在使用手写笔而不是LESS。 我的问题与此问题相同：Bootstrap 3Navbar折叠 但是，这些问题中的所有答案都说明了如何通过更改LESS变量来做到这一点。我没有接触过LESS，我正在使用
-
问题内容： 我在导航栏中做了一些修改，但是现在切换按钮在单击时没有响应。下面是我的代码。我哪里错了?? 码： 问题答案： 您需要更改此标记 改变 至 原因：的值是关联的nav div的任何类名。在这种情况下