Bootstrap下拉菜單不起作用

你好，我的引導nav沒有下到不同的部分，就像我在多個站點上的例子中看到的那樣。我嘗試過移動的東西，但無濟於事。我覺得我失去了一些東西，但這樣任何投入將不勝感激非常簡單：dBootstrap下拉菜單不起作用

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="/styles/style.css"> 
    <link rel=stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <title>Personal Portfolio</title> 
</head> 

<body> 

    <nav class="navbar navbar-inverse"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">WebSiteName</a> 
      </div> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 
     <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Page 1-1</a></li> 
         <li><a href="#">Page 1-2</a></li> 
         <li><a href="#">Page 1-3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
      </ul> 
     </div> 
    </nav> 

    <footer> 
    </footer> 

</body> 

</html>

一個例子：d

https://jsfiddle.net/pajdnLwv/

來源

2016-03-06 cosmichero2025

能否請您提供一個代碼的起點，用CodePen或的jsfiddle。另請參閱http://stackoverflow.com/help/mcve – Roy

有雅去adfdaf – cosmichero2025

你錯過加載下面的JS庫，使下拉菜單的工作：

jQuery庫（獲取引導JS工作）
引導JS（以得到下拉工作）

看到一個有效的解決方案：JSFiddle

添加到您的<head>得到它的工作：

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

來源

2016-03-06 15:58:47 Roy

謝謝XD我不知道爲什麼我忘了我已經使用bootstrap現在像20次 – cosmichero2025

無後顧之憂，很高興我能幫上忙。對於你的下一個項目，一定要添加整個Bootstrap包（jQuery，JS，CSS）。 – Roy

你只需要在你的頭標記的JavaScript文件。

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

，您可以嘗試here

來源

2016-03-06 15:59:39

謝謝XD我不知道爲什麼我忘了我已經使用了像20次現在的bootstrap – cosmichero2025

Np ..它是我們通常忽略並且後來意識到的這些非常小的事情。 :) –

更新答案使用引導4任何人。

請注意，在Bootstrap 4中，下拉菜單也依賴於popper.js庫（具體爲umd版本）。所以爲了讓他們工作，你需要按順序加載jquery，popper和bootstrap。截至今天，看起來像這樣：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

來源：Bootstrap Docs > Introduction > Quick Start

來源

2017-09-04 15:52:52

Bootstrap下拉菜單不起作用

回答

相關問題