我正在尝试使用 Bootstrap 3 固定顶部导航栏。但是当我减小浏览器屏幕尺寸并单击按钮时,它不显示任何链接
这是代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Creating a Fixed (top) Navigation Bar with Dropdown -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Exclusive</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
</body>
</html>
但是在调整大小并单击切换按钮时,它不显示链接
我已经包含了所需的 jquery 文件。
最佳答案
您将收到script
错误$ is undefined
,因为您加载脚本的方式如下所示是错误的。
<script src="bootstrap/js/bootstrap.min.js"></script><!--Either keep this-->
<script src="bootstrap/js/bootstrap.js"></script> <!--or this-->
<script src="bootstrap/js/jquery-1.11.3.js"></script><!--should come first-->
在加载任何 .js
文件之前,您需要加载 jquery-*.js
所以最终你需要
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
因此,您可以使用 bootstrap.js
或 bootstrap.min.js
,但不能同时使用两者。这会产生冲突!
<强> DEMO
关于javascript - Bootstrap 3 固定顶部导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32241381/