2015-10-07 65 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>