Question

对于以下代码，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>

Answer 1

当我在片段中添加neccecary JS和CSS文件时，一切似乎都有效。我的猜测是你没有包含必要的JS文件

<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>

Answer 2

我正在经历这种崩溃 - 不工作的事情并尝试了几种选择。最后，在 jquery .min.js之后加载 bootstrap .min.js 。

在我的代码中它就像：

 <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>

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

2 个答案: