Bootstrap下拉菜单不起作用
我无法让我的下拉菜单正常工作。 我可以得到完美的导航栏，但是当我点击“下拉菜单”（任何一个），它不会显示下拉菜单。 我试图在其他职位上看到这个，但没有任何解决所有人的问题帮助。 我直接从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 -->
也许尝试
<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">
并看看它是否会工作。
我有一个引导+铁路项目，下拉菜单工作正常。 他们在更新后停下来工作…
这是解决问题的解决scheme，将以下内容添加到.js文件中：
$(document).ready(function() { $(".dropdown-toggle").dropdown(); });
100％的工作解决scheme
只需将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>
将jquery js链接放在引导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>
如果有人仍然面临同样的问题，一定要检查您的浏览器中的视图页源 ，检查是否所有的jQuery和引导文件加载和文件的path是正确的。 最重要的！ 请确保使用最新的稳定的jquery文件。
看起来Rails 4还有更多的工作要做。
-
里面你Gemfile添加。
gem'bootstrap-sass'，'〜> 3.2.0.2'
如这里所见
-
接下来你需要运行
$ bundle install
这是没有人提到的部分
打开你的config / application.rb文件
-
在第二个到最后一个结束之前加上这个
config.assets.precompile + =％w（*。png * .jpg * .jpeg * .gif）
如这里所看到的大约20％的页面。
-
接下来在这个目录下创build一个custom.css.scss文件
应用程序/资产/样式表
就像在这里看到的那样 ，从上面的任务中可以看出来
-
里面的文件包括
@import“bootstrap”;
现在停止你的服务器，重新启动，一切都应该正常工作
我试图运行bootstrap而不使用gem，但它不适合我。
希望能帮助别人！
我正在使用rails 4.0并遇到同样的问题
这是我通过testing的解决scheme
添加到Gemfile
gem 'bootstrap-sass'
跑
bundle install
然后添加到应用程序/资产/ javascripts / application.js
//= require bootstrap
然后下拉应该工作
顺便说一句，克里斯的解决scheme也适用于我。
但是我认为这不符合资产pipe道的想法
我认为这是你的路线文件路线的问题。 不是引导程序，也不是JQuery文件。
在我的情况下，禁用Chrome扩展固定它。 我一个接一个地从Chrome中删除它们，直到find罪魁祸首。
由于我是违规的Chrome扩展的作者，我想我最好修复扩展！
我在使用ASP .NET Forms时遇到了这个问题。 我使用的解决scheme是从母版页中的<asp:ScriptManager runat="server">删除或注释掉jQuery和Bootstrap引用。 它似乎与您在<header>放置的jQuery和Bootstrap引用产生冲突。
只需使用这个100％的工作技巧来解决你的Bootstrap的下拉菜单问题。
在打开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>
