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

【问题标题】：Nav Collapse not working in Bootstrap 3导航折叠在 Bootstrap 3 中不起作用
【发布时间】：2016-01-04 14:58:27
【问题描述】：

以下代码的折叠不适用于引导程序 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>

【问题讨论】：

您是否包含必要的JS文件？如果不使用 jQuery 和 Bootstrap JS，当前代码将无法运行。
dropdown in bootstrap navbar的可能重复

标签： twitter-bootstrap twitter-bootstrap-3 navbar collapse

【解决方案1】：

当我在 sn-p 中添加 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>

【讨论】：

【解决方案2】：

我正在经历这个崩溃不起作用的事情并尝试了几个选项。最后，工作是在 bootstrap.min.js 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>

【讨论】：