2015-10-07 63 views
0

崩溃不适用于导航3中的导航栏以下代码。我尝试了许多不同的东西,但成功有限。导航折叠不起作用在Bootstrap 3

<nav class="navbar navbar-default" role="navigation"> 
 
\t <div class="navbar-header"> 
 
\t  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-ex1-collapse" aria-expanded="false"> 
 
\t  <span class="sr-only">Toggle navigation</span> 
 
\t  <span class="icon-bar"></span> 
 
\t  <span class="icon-bar"></span> 
 
\t  <span class="icon-bar"></span> 
 
\t  </button> 
 
\t  <a class="navbar-brand" href="#">New Blog</a> 
 
\t </div> 
 

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

+0

你是否包括必要的JS文件?目前的代码不会使用jQuery和Bootstrap JS。 –

+0

[bootstrap导航栏中的下拉列表]的可能重复(http://stackoverflow.com/questions/32988663/dropdown-in-bootstrap-navbar) –

回答

2

当我在片段中添加neccecary JS和CSS文件,一切似乎工作。我的猜测是,你是不是包括neccesary 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"> 
 
\t <div class="navbar-header"> 
 
\t  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-ex1-collapse" aria-expanded="false"> 
 
\t  <span class="sr-only">Toggle navigation</span> 
 
\t  <span class="icon-bar"></span> 
 
\t  <span class="icon-bar"></span> 
 
\t  <span class="icon-bar"></span> 
 
\t  </button> 
 
\t  <a class="navbar-brand" href="#">New Blog</a> 
 
\t </div> 
 

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

0

我正想通过这个崩溃 - 不劳动的事情,尝试了几种选择。最后什么工作是加载引导 .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>