切換按鈕崩潰在Bootstrap導航欄中不起作用

當導航欄崩潰時，我的切換按鈕不起作用。我已經多次查看了數據目標，看起來沒問題。切換按鈕崩潰在Bootstrap導航欄中不起作用

這裏是我的代碼：

<div class="navbar navbar-fixed-top navbar-inverse"> 
<div class="container"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html" title="The Title"> 
    <img style="max-width:100px;" src="images/LOGO-4.png"> 
    </a> 


    <div class="collapse navbar-collapse navbar-collapse"> 
     <ul class="nav navbar-nav pull-right"> 
      <li class="active"><a href="#">WORK</a></li> 
      <li><a href="#">CONTACT</a></li> 

     </ul> 
    </div>

有誰知道問題是什麼，如何解決呢？

來源

2014-11-06 James Howley

非常感謝，現在工作。我認爲我的jQuery鏈接不正確。我的'a class'元素後面也沒有關閉div標籤。 – 2014-11-07 00:56:29

當然，您的切換按鈕會根據您的屏幕分辨率而有所不同。嘗試一下：

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 


    </head> 
<body > 

<nav class="navbar navbar-inverse"> 
<div class="container-fluid"> 

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html" title="The Title"> 
    <img style="max-width:100px;" src="images/LOGO-4.png"> 
    </a> 
</div> 

    <div class="collapse navbar-collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav pull-right"> 
      <li class="active"><a href="#">WORK</a></li> 
      <li><a href="#">CONTACT</a></li> 

     </ul> 
    </div> 
    </div> 
    </nav> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    </body> 
</html>

在你的手機上試試看看。之後進入你的CSS文件，並設置屏幕大小的屬性，如果切換按鈕顯示爲。切換按鈕可能不會出現在桌面上，除非您更改這些屬性，或將瀏覽器窗口調小一些，直到出現切換按鈕。

例如，在我的瀏覽器窗口最大化，切換按鈕不會出現。 Toggle bar not shown 不過，如果你一半調整您的瀏覽器窗口（或者，如果你瀏覽手機上），它會看起來像這樣 When on mobile or a reduced browser size

要解決這個問題，你需要進入你的CSS設置。但是，只有當你想改變它時纔是如此。否則，它會正常工作。

來源

2014-11-06 01:21:56

非常感謝，現在正在工作。我認爲我的jQuery鏈接不正確。我的'a class'元素後面也沒有關閉div標籤。 – 2014-11-07 00:58:21

看到你有圖書館的正確的進口，我哈德一個同樣的問題，我不爲什麼有時它也有奇怪的行爲與不同版本的jQuery

試試這個

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 


<!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav>

來源

2014-11-06 08:50:25

感謝您對此的幫助，我認爲我的jquery鏈接不正確 – 2014-11-07 00:58:59

希望這將有助於因我有同樣的問題，並通過這個固定：

<body> 

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     ... 
    </nav> 

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

</body>

來源

2015-09-29 23:48:06

Default navbar - Requires JavaScript plugin

如果禁用JavaScript並且視口足夠窄以至於導航欄摺疊，則無法展開導航欄並查看.navbar摺疊內的內容。

的響應導航欄需要崩潰插件包含在你的引導

來源

2016-01-18 18:40:49 user4986178