Bootstrap下拉菜单无效
[英]Bootstrap dropdown-menu is not working
问题描述
你好我的bootstrap nav没有下降到不同的部分，就像我在多个站点的示例中看到的那样。 我试过搬东西但无济于事。 我觉得我错过了一些非常简单的东西，所以任何输入都会有很大的不足：D
<!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
3 个解决方案
解决方案1
6 已采纳 2016-03-06 15:58:47
您错过了加载以下JS库以使下拉菜单工作：
- jQuery库（获取Bootstrap JS工作）
- Bootstrap 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>
解决方案2
3 2016-03-06 15:59:39
您只需要在头标记中包含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>
你可以在这里试试
解决方案3
0 2017-09-04 15:52:52
使用Bootstrap 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>
*ngFor 无法与引导下拉菜单一起正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.