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