Question

我是Web开发的新手，并尝试在bootstrap中创建我的第一个站点。我的一切都很完美，突然我的下拉菜单不再有效。每当我点击按钮时，它就像动作一样发光，但列表项永远不会出现。我甚至从bootstrap组件页面复制并粘贴了模板代码以测试它，该按钮也不起作用。

我错过了头部的样式链接吗？

这是我用于标题的CSS和HTML，到目前为止我添加到下拉菜单中的唯一CSS是更改按钮颜色和边框：

#header {
    margin: 20px 20px 50px 20px;
    padding-bottom: 10px;
    border-bottom: #3d3935 solid 3px;
    overflow: visible;
}

.navbar {
    background: #d9d9d6;
    padding: 15px 50px;
    border-bottom: #3d3935 solid 2px;
}

#header #logo {
    float: left;
    padding: 0px;
    margin-left: 5px;
}

#header #nav {
    float: right;
    font-family: 'Molengo', sans-serif;
    font-size: 18px;
    margin-right: -15px;
}

#dropdownMenu1 {
    border: none;
    background: #d9d9d6;
}

<head>
 
  <meta charset="utf-8">
        
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
       
  <title>Nate Delforge - Graphic Designer</title>
       
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
       
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
  
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  
  <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
  
  <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        
  <script src="//use.typekit.net/dpm0esa.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>
        
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        
</head>

<body>
  
 <div class="container-fluid">
            
  <div id="header">
   <nav class="navbar navbar-default navbar-fixed-top">
                
    <div class="row">
     <div id="logo" class="col-sm-6">
      
       <img class="img-responsive" src="img/header/natedelforgeHeaderLogo.jpg" alt="Nate Delforge Logo">
      
     </div>
                
     <div id="nav">
      <div class="col-sm-6">
                        
       <div class="dropdown">    
        
        <button class="btn btn-default dropdown-toggle" type="button"  
        id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">MENU 
        <span class="glyphicon glyphicon-menu-hamburger"></span></button>
        
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#home">HOME</a></li>
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#about">ABOUT</a></li>                                                              <li role="presentation"><a role="menuitem" tabindex="-1" href="#porfolio">PORTFOLIO</a></li>
           <li role="presentation"><a role="menuitem" tabindex="-1" href="contact">CONTACT</a></li>
            <!-- Adding an External Blog Later -->
                            
         </ul>
        
        </div>
                                         
       </div>
      </div>
                    
     </div>
            
    </nav>    
   </div>

提前感谢您的帮助。

Answer 1

我很确定你需要在bootstrap js之前加载jquery，好像我没记错，bootstrap依赖于他们的一些类

您应该按此顺序加载它们。（如果这对您有用，请告诉我。我测试了它似乎对我有用）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

Bootstrap下拉按钮不起作用

1 个答案: