Bootstrap下拉菜单

Question

我无法使这段Bootstrap下拉菜单代码“下拉”。

我在一个MEAN（AngularJS）环境中运行此代码。

HTML部分运行完美，但没有“dropdown”元素。

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Change Customer<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#!">Customer</a></li>
<li><a href="#!">Customer</a></li>
<li><a href="#!">Customer</a></li> 
</ul>
</li>

为什么下拉功能没有出现？

- CMS

---

你是否已经包含了Bootstrap的JavaScript文件？我不是100%确定，但我认为这对此很有必要。 - StudioTime

你使用原始的Bootstrap JS代码（使用jQuery），还是UI Bootstrap，这是重写为Angular指令的JS代码？ - Jakub Matczak

当我在使用Bootstrap时，我编写了这个小Gist作为指南，请查看gist。总的来说，您错过了包括Bootstrap的.js文件，您还需要jquery。 - KhaledMohamedP

Answer 1

这是因为您没有包含Bootstrap的JavaScript文件

在您的标签结尾处添加以下代码：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

- Programmer

Answer 2

尝试检查您的文件中是否有您需要的所有内容。

如果您使用CDN，则在您的HTML某处应该有这个：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

代码的源头显然在这里。

最佳实践是将其放置在HTML文件末尾以减少加载时间。

- sparaflAsh