Bootstrap 导航折叠在引导3中不起作用

62o28rlo  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(251)

对于下面的代码,崩溃对bootstrap 3中的导航栏不起作用。我尝试了许多不同的方法,但成功有限。

<nav class="navbar navbar-default"  role="navigation">
	  <div class="navbar-header">
	    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-ex1-collapse" aria-expanded="false">
	      <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="#">New Blog</a>
	  </div>

	  <div id="navbar-collapse" class="collapse navbar-collapse">
	    <ul class="nav navbar-nav">
	      <li><a href="#">Blog</a></li>
	      <li><a href="#">Contact me</a></li>
	    </ul>
	  </div>
	</nav>
cwxwcias

cwxwcias1#

当我在代码段中添加必要的JS和CSS文件时,一切似乎都正常了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<nav class="navbar navbar-default"  role="navigation">
	  <div class="navbar-header">
	    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-ex1-collapse" aria-expanded="false">
	      <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="#">New Blog</a>
	  </div>

	  <div id="navbar-collapse" class="collapse navbar-collapse">
	    <ul class="nav navbar-nav">
	      <li><a href="#">Blog</a></li>
	      <li><a href="#">Contact me</a></li>
	    </ul>
	  </div>
	</nav>
btxsgosb

btxsgosb2#

我经历了这个崩溃不工作的事情,并尝试了几个选项。最后工作的是加载bootstrap. min.js**after*-jquery. min.js。
在我的程式码中,它会像这样:

<!-- Scripts -->
    <script src="http://localhost/fresh/public/assets/jquery/dist/jquery.min.js"></script>
    <script src="http://localhost/fresh/public/assets/js/bootstrap.min.js">    </script>
</body>
</html>

相关问题