gpt4 book ai didi

javascript - Bootstrap 3 固定顶部导航栏

转载 作者:行者123 更新时间:2023-12-03 09:03:32 24 4
gpt4 key购买 nike

我正在尝试使用 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>

enter image description here

但是在调整大小并单击切换按钮时,它不显示链接

enter image description here

我已经包含了所需的 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.jsbootstrap.min.js,但不能同时使用两者。这会产生冲突!

<强> DEMO

关于javascript - Bootstrap 3 固定顶部导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32241381/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com