bootstrap3 导航栏在 jsfiddle 上折叠，但在本地浏览器上不起作用
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
首先使用而不是尝试在您的部分中使用此元标记<head><header><head><meta name="viewport" content="width=device-width, initial-scale=1">然后，导航栏将折叠所有小于768px的屏幕尺寸，作为引导的默认行为。因此，要将其扩展到某个屏幕断点，您可以将此类组合添加到主导航元素中。navbar-expand-*希望它对你有用。 -
ABOUTYOU
在代码中应考虑许多事项。您应该将资源放在<标题>而不是<标题>。这两者之间有一个主要区别，一个包含机器可读的信息，而另一个代表介绍性内容。您需要在引导.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
使用 标记。并在页面末尾附近，在 标记结束之前包含 js 文件。为了节省将来的时间，请访问引导官方文档。https://getbootstrap.com/docs/4.5/getting-started/introduction/<head></body>它是最好和写得很好的文档之一。
随时随地看视频慕课网APP
相关分类
JavaScript