我的 bootstrap 网站 li 标签将在移动版本上压缩。 但是当我点击切换按钮时，导航栏不会在移动版本上加载。
这是带有 javascript 引用的 html/css 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to our website</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">FaceTheMusic</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li><a href="">Home</a></li>
<li><a href="">Login</a></li>
<li><a href="">Search</a></li>
<li><a href="">Upload</a></li>
</ul>
</div>
</div>
</div>
<div id="navPlayer" class="navbar navbar-inverse navbar-fixed-bottom">
<ul>
<li>Home</li>
</ul>
</div>
<br /> <br/> <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br />
This is a test <br /> This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
</body>
</html>最佳答案
data-target之间有一个额外的空格
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navHeaderCollapse">
应该是
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
如果你修复了它，它应该可以工作。 https://jsfiddle.net/5fx9qwuy/1/
关于javascript - Bootstrap 3 Navbar 不会切换(已检查现有解决方案，单击时仍不会切换折叠)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32356656/