Question

<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Article<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Technology</li>
<li>Technology 2</li>
<li>Technology 3</li>
</ul>
</div>
</body>
</html>

此代码在我的浏览器（firefox）上无法正常工作，当我点击按钮时，下拉列表不会出现..请帮忙

Answer 1

请试一试。

<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"/>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Article
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Technology 1</a></li>
    <li><a href="#">Technology 2</a></li>
    <li><a href="#">Technology 3</a></li>
  </ul>
</div>

Answer 2

使用Bootstrap时，请务必确保 head 部分包含：

jquery script
bootstrap javascript
bootstrap css文件

这必须是订单，否则它不会起作用。 D Sai Krishna的代码（特别是前三行）是它应该是怎样的。我总是发现使用.js和.css文件的外部链接比使用本地文件更好。总而言之，在 head 部分粘贴外部链接（这些内容在撰写本文时是最新的）：

    1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   //This will initialize jQuery and enable it to work properly//

    2. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   //This will implement Javascript whenever Bootstrap is being used (if applicable). //

    3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   //This will enable Bootstrap styles to be applied to your HTML//

供参考，请访问 W3schools.com/bootstrap ，在那里您可以找到如何实现上述行和位置。您还可以找到bootstrap .js和.css

Bootstrap中的下拉菜单

2 个答案: