2014-11-02 58 views
4

我是新手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的整個代碼時,問題依然存在,所以我不認爲它是這樣的。我可能也會(使用冗餘類),但那是一個故事以後...

回答

5

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

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

+0

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

6

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

0

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

0

我有同樣的問題,請確認您包含這兩個文件。 第一個是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> 
0

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

<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">