使用引导程序折叠后，导航栏不会下拉菜单

Question

我似乎无法弄清楚为什么我的右上角按钮“菜单”不会触发下拉菜单。 谁能指出这是怎么回事？ 当我单击它时，什么都没有发生，但是“主页”应该会下拉。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Store</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">

<a href = "#" class ="navbar-brand">Site</a>

<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
Menu
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">

<li><a href="#">Home</a></li>

</ul>
</div>
</div>

</div>









<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

您需要先加载jquery javascript库，然后再加载bootstraps javascript库。 Bootstrap在jquery上运行，如果不先加载它就无法工作，因此在bootstrap.js添加到jquery的链接之前，它应该如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

另外，如果您希望导航栏正常工作，则应将导航栏品牌和菜单按钮包裹在导航栏标题类中。 如果您希望菜单以移动宽度显示在导航栏中，则可以保持原样。

这是一个工作中的Codepen Codepen

Answer 2

检查这个小提琴：小提琴

导航栏在较大的屏幕上看起来不错，但是当屏幕尺寸减小时，将显示“菜单”选项，单击该菜单时会在导航中显示“主页”选项。

您的代码唯一的问题是您尚未调用jquery库。 这是运行引导javascript所必需的。

您只需在调用引导javascript之前在html的开头添加此脚本标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Answer 3

这2个文件丢失。 您需要包括它们。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

没有这些文件，它将无法正常工作。

检查此文件

使用引导程序折叠后，导航栏不会下拉菜单

问题描述

3 个解决方案

解决方案1
0 2016-01-26 21:15:21

解决方案2
0 2016-01-26 21:16:03

解决方案3
0 2016-01-26 21:39:49

使用引导程序折叠后，导航栏不会下拉菜单

问题描述

3 个解决方案

解决方案1 0 2016-01-26 21:15:21

解决方案2 0 2016-01-26 21:16:03

解决方案3 0 2016-01-26 21:39:49

解决方案1
0 2016-01-26 21:15:21

解决方案2
0 2016-01-26 21:16:03

解决方案3
0 2016-01-26 21:39:49