Bootstrap崩潰導航欄不擴展

我是新手Bootstrap，只是試圖讓摺疊下拉導航欄的行爲。它完美調整大小，直到窗口非常小，觸發所有導航欄項目被移除並放置在小數據切換按鈕內。因爲當我點擊該lil的數據切換按鈕時，它不會展開並顯示下拉列表中的項目。Bootstrap崩潰導航欄不擴展

<nav class="navbar navbar-default" role="navigation"> 

      <div class="container-fluid"> 
       <div class="navbar-header logo"> 
        <a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 

       </div> 

       <div class="collapse navbar-collapse" id="nav-collapse"> 
         <!-- Individual Navbar elements --> 
        <ul class="nav nav-justified nasti-nav"> 
         <li class="active"><a href="index.html">Home</a></li> 
         <li class="divider"></li> 
         <li><a href="familylaw.html">Family Law</a></li> 
         <li class="divider"></li> 
         <li><a href="criminallaw.html">Criminal Law</a></li> 
         <li class="divider"></li> 
         <li><a href="conveyancing.html">Conveyancing</a></li> 
         <li class="divider"></li> 
         <li><a href="about.html">About</a></li> 
         <li class="divider"></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </div> 
      </div> <!-- Container fluid--> 

     </nav>

我用過的所有網頁上此相同的代碼，但由於某種原因，它僅適用本網站的主頁上。主頁和其他頁面之間的唯一區別在於<nav>標籤下方有另一個內容div，其中包含該頁面的主要文本&圖像。這就是說，當我從我的頁面上刪除這個div的整個代碼時，問題依然存在，所以我不認爲它是這樣的。我可能也會（使用冗餘類），但那是一個故事以後...

來源

2014-11-02 kaifresh

我使用相同的代碼，它是可以正常使用，請檢查http://jsbin.com/henume/2/edit?html,output

你提到的它會調整得當，所以我假定bootstrap.css工作。請確保頁面中包含jQuery.js和boostrap.js。

來源

2014-11-02 13:40:49 nasirkhan

謝謝！有趣....我實際上看到了關於jQuery的其他答案，但是假設是因爲我確實在html中有一個jQuery，這不是問題。但顯然我使用的鮑爾模板以這種方式鏈接它，不保證它加載.. 鮑爾模板把jQuery放在身體的底部，然後引導js的東西仍然。那麼關於這個順序的一些事情意味着jQuery不能及時加載？當我按照你的jsbin並把頭部包含在內，那麼它的作品完美。 – kaifresh 2014-11-02 23:48:35

大多數時候，它的原因是jQuery沒有正確鏈接到頁面。或者在jQuery.js之前引用bootstrap.js。確保你有正確的鏈接。

來源

2014-11-02 13:24:59

正如nasirkhan所提到的，代碼在活動域上完美運行。有時候，這個問題可能是由本地域名引起的，就像我的情況一樣，並且相同的代碼在活動網站上呈現良好。

來源

2015-04-09 17:46:05

我有同樣的問題，請確認您包含這兩個文件。第一個是Bootstrap（CSS），第二個是Bootstrap（javascript）。在我的情況下正確地包括了CSS，但你知道我在包括第二個包括的時候做了什麼，但是它是一個腳本。

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


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

來源

2017-05-29 13:11:57 only4

這三條線的添加幫助了我。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> 

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

來源

2017-11-02 19:10:09

Bootstrap崩潰導航欄不擴展

回答

相關問題