我无法让我的下拉列表工作。我可以让导航栏完美显示，但是当我点击“Dropdown”（其中任何一个）时，它不会显示下拉菜单。我试过看其他关于此的帖子，但没有解决每个人问题的问题。我直接从bootstrap的网站上复制了源代码，但我似乎无法在我的机器上运行它。有人有主意吗？我一直盯着它看了一个小时，似乎无法弄清问题是什么。
<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
答案 0 :(得分：125)
也许尝试用
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
并查看它是否有效。
答案 1 :(得分：99)
我有一个bootstrap + rails项目，下拉工作正常。 他们在更新后停止工作......
这是解决问题的解决方案，将以下内容添加到.js文件中：
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
答案 2 :(得分：23)
100％工作解决方案
首先将Jquery链接放在所有js和css链接
中示例正确
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
示例错误！
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
答案 3 :(得分：11)
将jquery js链接放在bootstrap js链接之前，如下所示：
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
而不是：
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
答案 4 :(得分：2)
我在使用ASP .NET Forms时面对这个问题。我使用的解决方案是从母版页中的<asp:ScriptManager runat="server">删除或注释掉jQuery和Bootstrap引用。它似乎与您放在<header>中的jQuery和Bootstrap引用产生冲突。
答案 5 :(得分：1)
也许有人可以从中受益：
由于从django-bootstrap3版本6.2.2升级到11.0.0，Bootstrap下拉列表停止下降。
我们在旧版django至bootstrap高度依赖的旧版django-bootstrap3网站中遇到了类似的问题。该站点一直运行良好，并在生产中继续运行，但在我们的本地测试系统上却没有。代码中没有明显的相关更改，因此最有可能发生依赖性问题。
访问本地django测试服务器上的站点时，看起来还不错。乍一看：使用bootstrap进行样式/布局，包括导航栏。但是，所有下拉菜单都无法下拉。
浏览器控制台中没有错误。所有静态js和css文件均已成功加载，并且其他依赖于jquery的软件包的功能正在按预期运行。
事实证明，我们本地python环境中的django-bootstrap3软件包已升级到最新版本11.0.0，而该站点是使用6.2.2构建的。
回滚到django-bootstrap3==6.2.2为我们解决了这个问题，尽管我不知道到底是什么原因造成的。
答案 6 :(得分：1)
如果仍有人遇到同样问题，请务必检查浏览器中的查看页面源，以检查是否已加载所有jquery和bootstrap文件，以及文件路径是否正确。最重要的！确保使用最新的稳定jquery文件。
答案 7 :(得分：1)
根据getBootstrap.com，下拉列表基于第三方库Popper.js构建。因此，如果下拉菜单在onclick上不起作用，而仅在下拉菜单上起作用，则包括popper.js，bootstrap.js和bootstrap.css。原因之一是在包含引导程序包之前不包含popper.js。
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>
答案 8 :(得分：0)
就我而言，停用Chrome扩展程序会修复它。我一个接一个地从Chrome中删除它们，直到找到了罪魁祸首。
由于我是违规Chrome扩展程序的作者，我想我最好修复扩展程序！
答案 9 :(得分：0)
如果您在 Ruby on Rails 中遇到问题，则Bootstrap Ruby Gem readme file提供了详尽的解决方案。
或简而言之：
application.css重命名为application.scss @import "bootstrap"; gem 'jquery-rails'添加到Gemfile，除非它存在。//= require jquery3
//= require popper
//= require bootstrap
//= require bootstrap-sprockets
到application.js。答案 10 :(得分：0)
我尝试了以上所有答案，并且唯一适用于我的版本是 jquery 1.11.1 。 我尝试使用所有其他版本 1.3.2、1.4.4、1.8.2、3.3.1 ，并且导航栏下拉菜单不起作用。
<script src="jquery/jquery-1.11.1.min.js"></script>
答案 11 :(得分：0)
在有角度的项目中，我们添加了angular-cli.json或angular.json这些代码行：
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
答案 12 :(得分：0)
对于Bootstrap 4，您需要一个附加库。 如果您阅读了浏览器控制台，Bootstrap实际上会显示一条错误消息，告诉您需要它才能正常工作。
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
答案 13 :(得分：0)
答案 14 :(得分：0)
我的bootstrap版本指向bootstap4-alpha，
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
更改为4-beta
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
它开始工作
答案 15 :(得分：0)
我认为这是路线文件路线的问题。不是bootstrap也不是JQuery文件。
答案 16 :(得分：0)
我正在使用rails 4.0并遇到同样的问题
这是我通过测试的解决方案
添加到Gemfile
gem 'bootstrap-sass'
运行
bundle install
然后添加到app / assets / javascripts / application.js
//= require bootstrap
然后下拉列表应该有效
顺便说一句，克里斯的解决方案对我也有用。
但我认为它不太符合资产管道理念
答案 17 :(得分：0)
看起来Rails 4还有更多工作要做。
在你里面添加Gemfile。
gem＆＃39; bootstrap-sass＆＃39;，＆＃39;〜＆gt; 3.2.0.2＆＃39;
接下来你需要运行
$ bundle install
这是没有人提及的部分
打开config / application.rb文件
在第二个到最后一个结尾之前添加此权限
config.assets.precompile + =％w（*。png * .jpg * .jpeg * .gif）
as seen here约占页面的20％。
接下来在此目录中创建custom.css.scss文件
应用程序/资产/样式表
as seen here距离上述任务稍远一点
在该文件中包含
@import＆＃34; bootstrap＆＃34;;
现在停止服务器并重新启动，一切正常。
我试图在不使用宝石的情况下运行bootstrap，但它对我没用。
希望能帮助别人！
答案 18 :(得分：-3)
只需使用此100％工作技巧即可解决Bootstrap的下拉菜单问题。
打开body标签后，将这些文件粘贴到页面中的任何位置。如果将它们粘贴到body标签内，则问题仍然存在。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>