bootstrap3 导航栏折叠在 jsfiddle 上工作如下。https://jsfiddle.net/wa3he6bn/1/<html><header> <title>title</title> ....</header><body><div class="wrap"> <nav id="w1" class="navbar-default navbar-fixed-top navbar"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="/index.php">Logo</a></div> <div id="w1-collapse" class="collapse navbar-collapse"> <ul id="w2" class="navbar-nav navbar-right nav"> <li><a href="/index.php?r=site%2Findex">主页</a></li> <li><a href="https://docs.mathcrowd.cn" target="_blank">文档</a></li> <li><a href="/index.php?r=worksheet%2Ffilter">卷库</a></li> <li class="help-link"><a href="javascript:void(0);"><span class="glyphicon glyphicon-question-sign"></span></a></li> <li><a href="/index.php?r=cart%2Fview"><span class="glyphicon glyphicon-shopping-cart"></span></a> </li> </ul> </div> </div> </nav></div></body></html>但是当保存相同的html并在本地运行时，它不会崩溃。
3 回答
UYOU
TA贡献1878条经验 获得超4个赞
首先使用而不是尝试在您的部分中使用此元标记<head><header><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
然后，导航栏将折叠所有小于768px的屏幕尺寸，作为引导的默认行为。因此，要将其扩展到某个屏幕断点，您可以将此类组合添加到主导航元素中。navbar-expand-*
希望它对你有用。
ABOUTYOU
TA贡献1812条经验 获得超5个赞
在代码中应考虑许多事项。
您需要在引导.js之前加载
jquery.min.js，因为引导程序需要使用 jQuery。您还需要添加
<meta名称=“视口”内容=“宽度=设备宽度，初始比例=1”>，以便能够控制所有屏幕尺寸的视口。<head>
通过遵循这两个注释，您的代码应该按预期工作。
<html>
<head>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<!-- 以下为页眉内容 -->
<nav id="w1" class="navbar-default navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a class="navbar-brand" href="/index.php">Logo</a></div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul id="w2" class="navbar-nav navbar-right nav">
<li><a href="/index.php?r=site%2Findex">主页</a></li>
<li><a href="https://docs.mathcrowd.cn" target="_blank">文档</a></li>
<li><a href="/index.php?r=worksheet%2Ffilter">卷库</a></li>
<li class="help-link"><a href="javascript:void(0);"><span class="glyphicon glyphicon-question-sign"></span></a></li>
<li><a href="/index.php?r=cart%2Fview"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 结束 -->
</div>
</body>
</html>
慕容3067478
TA贡献1773条经验 获得超3个赞
使用 标记。并在页面末尾附近，在 标记结束之前包含 js 文件。为了节省将来的时间，请访问引导官方文档。https://getbootstrap.com/docs/4.5/getting-started/introduction/<head></body>
它是最好和写得很好的文档之一。
添加回答
举报
0/150
提交
取消