Bootstrap 4导航栏崩溃不起作用 [英] Bootstrap 4 navbar collapse not working
本文介绍了Bootstrap 4导航栏崩溃不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Bootstrap 4实现导航栏。目前，当视口缩小到移动大小时，导航栏正确折叠。但是，当试图切换菜单时，没有任何反应。 jsFiddle示例演示了这种行为。我也附加了HTML。
我已采取的步骤：
< title>
网站标题
< / title>
将链接的rel = 样式表 类型= 文本/ CSS的 href = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css />
将链接的rel = 样式表 类型= 文本/ 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-brandhref =＃>
< i class =fa fa-globearia-hidden =true>< / i>品牌名称
< / a>
将按钮类= Navbar的toggler坍塌 类型= 按钮 数据肘节= 崩溃 的数据目标= ＃navbarSupportedContent 咏叹调-对照= navbarSupportedContent 咏叹调发泡= falsearia-label =切换导航>
< i class =fa fa-angle-double-down>< / i>
< / button>
< div class =navbar-collapse collapseid =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>登录< / a>< / li>
< li class =nav-item>< a href =＃class =nav-link>注册< / a>< / li>
< li class =nav-item>< a href =＃class =nav-link>注销< / a>< / li>
< / ul>
< / div>
< / nav>
< / div>
< div class =container>
< nav class =navbar navbar-inverse fixed-bottom text-center>
< h6 class =text-light text-center>页脚< / h6>
< / nav>
< / div>
<！ - 脚本 - >
< script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous >< /脚本>
< 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 完整性= SHA384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / RE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkN crossorigin = 匿名 >< ; /脚本>
< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.jsintegrity =sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFghcrossorigin =匿名>< /脚本>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.jsintegrity =sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJcrossorigin =anonymous >< /脚本>
更新后的小提琴： https://jsfiddle.net/u7v5jba9/1/
建议：将来，请务必打开dev在您的浏览器中查看控制台控制台以查找任何错误消息。
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.
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
jsFiddle link 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
解决方案
You need to include Popper as per the Getting Started Docs.
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-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>
Updated working Fiddle: https://jsfiddle.net/u7v5jba9/1/
Advice: In future, always open the dev inspector console in your browser to find any error messages.
这篇关于Bootstrap 4导航栏崩溃不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
