@media下拉菜單 - 顯示菜單

Question

我希望我的網站能夠響應不同的屏幕尺寸。目前我正在測試我的網站，寬度爲765px（或更低）。我想要發生的是當我點擊三個欄時菜單出現，但沒有任何反應。沒有菜單出現，只是'品牌名稱'。

我爲我的菜單使用了引導程序導航。

這是頁面（編輯）的屏幕截圖：

jQuery代碼： - 外部文件

@media screen and (min-width: 280px) and (max-width: 765px){ 
/* code goes here */ 
    .primary { 
     color: orange !important; 
     font-size: 14px; 
    } 
} 

的顏色變化是檢驗尺寸。

的HTML： - 導航僅

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <button type="button" class="navbar-toggle" 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> 
      <div class="navbar-header"> 
      <a class="navbar-brand" href="index.php"><span class="primary">#</span></a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.php">Home</a></li> 
        <li><a href="about.php">About</a></li> 
        <li><a href="services.php">Services</a></li> 
        <li><a href="contact.php">Contact</a></li> 
        <li><a href="privacy.php">Privacy</a></li> 
        <li><a href="terms.php">Terms</a></li> 
        <li><a href="copy.php">Copyright</a></li> 
       </ul> 
      </div><!-- navbar collapse --> 
     </div> 
    </nav> 

有什麼我錯過了？ 我該如何解決我的問題？

任何幫助，將不勝感激。

感謝

Answer 1

原因之一會被搞亂的jQuery和bootstrap.js的順序。 Bootstrap需要jQuery才能運行一些事件。因此，請確保您的jquery腳本在bootstrap.min.js或bootstrap.js之前。

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

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

 
<nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <button type="button" class="navbar-toggle" 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> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="index.php"><span class="primary">#</span></a> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="index.php">Home</a></li> 
 
        <li><a href="about.php">About</a></li> 
 
        <li><a href="services.php">Services</a></li> 
 
        <li><a href="contact.php">Contact</a></li> 
 
        <li><a href="privacy.php">Privacy</a></li> 
 
        <li><a href="terms.php">Terms</a></li> 
 
        <li><a href="copy.php">Copyright</a></li> 
 
       </ul> 
 
      </div><!-- navbar collapse --> 
 
     </div> 
 
    </nav>