html - bootstrap 4.3.1 导航栏在链接点击时不折叠
问题描述
对于成为另一个引导导航栏问题的建议,我深表歉意,但我无法在此处已回答的问题中找到解决方案。
提前谢谢你的帮助。
使用引导程序 4.1.3。
问题:导航栏在链接点击时没有折叠。
以下是<head>
标签内的链接(如果重要,放在 style.css 之前):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
这里有两个脚本放在</body>
标签之前:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
这是我的导航栏代码:
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
解决方案
编辑:
我明白你现在在说什么:
Bootstrap 具有要应用于标签的属性,以便功能在导航栏上正常工作。
需要的属性是 data-toggle 和 data-target 属性。
将您的“a”标签更改为如下所示:
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#reviews">Reviews</a>
工作jsfiddle:https ://jsfiddle.net/e6cfL9m0/
这个问题实际上已经在这里得到了回答: How to hide collapsible Bootstrap 4 navbar on click
推荐阅读
- api - Vuex“类型错误:无法读取未定义的属性‘数据’”
- javascript - 使用javascript定位表内的所有标签
- ios - Titanium 使用 NSNotificationCenter 使用 Hyperloop
- java - 30 分钟不活动后 mongo DB 的套接字超时
- android - 使用 appium 使用三星互联网浏览器进行测试自动化
- windows - 从 Jenkins 将文件部署到 Windows 主机
- html - 将 div 设为特定 div 的绝对值
- bash - 如何使用远程提交到使用 Loadleveler 的集群的作业的状态作为 BASH 脚本中的循环控制参数?
- python - 使用 ffmpeg_extract_subclip 提取视频的一部分 - 黑帧
- javascript - 条形图的工具提示在角度中使用 d3-tip?