bootstrap切換。崩潰不工作

我正在關注如何創建具有下拉功能的導航欄的教程，但事情不能正常工作。bootstrap切換。崩潰不工作

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>My Bootstrap</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> 
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script> 
     <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>--> 
    <link rel="text/javascript" href="bootstrap/js/bootstrap.min.js" /> 
</head> 

<body> 

    <!-- Top Menu Bar--> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid">   
      <!-- Logo --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a> 
      </div> 

      <!-- Menu Items --> 
      <div class="collapse navbar-collapse" id="mainNavBar"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 

     </div> 
    </nav> 

    <!-- Main Content --> 
    <div class="container"> 



    </div> 
</body> 

</html>

切換功能工作正常，但菜單項不能在點擊按鈕崩潰。基於教程這是一個jQuery的問題。我嘗試使用更新的，但仍然沒有工作。我也嘗試下載jquery文件仍然沒有工作。有人能告訴我這段代碼有什麼問題嗎？

來源

2017-01-06 mendz

'data-'和'toggle'之間有空格。 –

抱歉，這是一個錯誤的問題。雙重檢查它，並沒有 – mendz

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
    </head> 
    <body>  
    <nav class="navbar navbar-default"> 
     <div class="container-fluid">   
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" 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="#">Brand</a> 
     </div>   
     <div class="collapse navbar-collapse" id="mainNavBar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
      <li><a href="#">Link</a></li> 
      </ul>  
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 
    </div> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script> 
</body> 
</html>

這裏是plunkr

你錯過了一個類倒塌和

數據 - 撥動= 「崩潰」

之間的空間是有聯繫

來源

2017-01-06 06:36:46

感謝這個兄弟。但我不知道我做錯了什麼。我複製你的腳本聲明，它的工作。一切都保留下來。空間錯誤只是一個錯字。我只是從該網站下載bootstrap，所以是jQuery。我不明白爲什麼它不會工作。如果可能，我想在本地開發我的網站。 – mendz

我只是通過在本地下載jquery和boostrap來嘗試同樣的事情，它的工作原理 –

確保您正確加載所有庫，打開調試器並檢查是否所有內容都已加載。在'boostrap.js'之前加載'jquery'還有一件事 –

改變這一點。你的錯誤在這裏：

<button type="button" class="navbar-toggle" data- toggle="collapse" data-target="#mainNavBar">

到

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">

來源

2017-01-06 03:49:00 ThinhLe

以外的空間錯誤先生。這是一個錯字錯誤，抱歉 – mendz

下面是完整的代碼。試試這個

<nav class="navbar navbar-inverse"> 
<div class="container-fluid">   
    <!-- Logo --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a> 
    </div> 

    <!-- Menu Items --> 
    <div class="collapse navbar-collapse" id="mainNavBar"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 

</div>

CSS：

來源

2017-01-06 06:04:49 ThinhLe

仍然無法正常工作。這個代碼對你有用嗎？你能給我你的完整代碼，包括腳本聲明。 – mendz

也許你的屏幕大小是不固定的。嘗試添加此CSS並檢查您的屏幕大小。

@media (max-width: 1024px) { 
.navbar-header { 
float: none; 
} 

.navbar-toggle { 
display: block; 
} 

.navbar-collapse { 
border-top: 1px solid transparent; 
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 

.navbar-collapse.collapse { 
display: none!important; 
}

來源

2017-01-06 06:30:50 ThinhLe

bootstrap切換。崩潰不工作

回答

相關問題