Bootstrap 4导航栏不会在大屏幕上折叠
[英]Bootstrap 4 navbar not collapsing on large screen
问题描述
我正在尝试使用 Bootstrap 4 实现导航栏。目前，当视口缩小到移动尺寸时，导航栏会正确折叠。 但是，当尝试切换菜单时，没有任何反应。 jsFiddle 示例演示了这种行为。 我也附上了HTML。
我已采取的步骤：
- 删除所有自定义 CSS
- 确保 jQuery 链接在 Bootstrap JS 文件之前
- 页眉和页脚中的脚本标签
- 从 Bootstrap Docs 复制并粘贴确切的示例（我得到相同的行为）
- 确保 JS 在 Chrome 浏览器中使用
- 使用 WC3 验证器验证的 HTML
- 当然，阅读关于这个问题的各种帖子，但没有一个导致解决方案
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>
4 个解决方案
解决方案1
28 已采纳 2017-11-16 12:32:30
您需要按照Getting Started Docs包含 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>
更新了工作小提琴： https ://jsfiddle.net/u7v5jba9/1/
建议：以后，请始终在浏览器中打开开发检查器控制台以查找任何错误消息。
解决方案2
4 2018-01-22 15:45:45
您还可以将引导程序引用更改为捆绑版本 - 引导程序。 捆绑.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>
小提琴： https ://jsfiddle.net/smoore4/m2dLp71q/
正如@Anand Rockzz 正确指出的那样，您仍然需要在此引用之前添加 jQuery。
解决方案3
2 2020-05-07 10:42:21
当您错过脚本的顺序时会发生这种情况。 您应该始终按此顺序包含脚本
- 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/popper.js@1.16.0/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>
解决方案4
0 2022-05-13 03:40:02
这可能会有所帮助...自 Bootstrap 5 以来，崩溃的工作方式略有变化...参见代码`
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">DATA STRUCTURES & ALGORITHMS JS</button>
<div class="collapse" id="collapseExample" >
<form class="form-inline" id="form">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
折叠多个导航栏引导程序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.