Bootstrap Drowdown按鈕不起作用

我對web開發非常陌生，並試圖在bootstrap中執行我的第一個站點。我有一切工作完美，突然我的下拉菜單不再起作用。每當我點擊這個按鈕，它就會像動作發生一樣發光，但是列表中的項目永遠不會出現。我甚至複製並粘貼了bootstrap組件頁面中的模板代碼來測試它，並且該按鈕也不起作用。Bootstrap Drowdown按鈕不起作用

我錯過了頭部樣式鏈接？

這裏是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>

提前感謝您的幫助。

來源

2015-04-04 Nate

我敢肯定你需要的，如果我沒有記錯的引導JS之前加載了jQuery，引導依賴於他們的一些類

，你應該加載它們的順序。（請讓我知道，如果這對你有效，我測試過，它似乎對我有用）

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

來源

2015-04-04 14:52:09

是的，這就是它做的！永遠不會想到我自己，謝謝！ – Nate 2015-04-04 15:06:33

是的，沒問題。這是我第一次學習bootstrap時碰到的東西。祝你好運！（請標記爲答案:) – 2015-04-04 15:08:28

Bootstrap Drowdown按鈕不起作用

回答

相關問題