引导下拉菜单不工作

我的下降机在工作上遇到了麻烦。我可以让导航栏完美地显示出来,但是当我点击“下拉菜单”(它们中的任何一个)时,它都不会显示下拉菜单。关于这个问题,我已经尝试在其他帖子中寻找答案,但是没有一个能够解决所有人的问题。我直接从 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 -->

356361 次浏览

也许可以试试

<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">

看看能不能成功。

看来 Rails 4还有很多工作要做。

  1. 在你的 Gemfile 添加。

    Gem‘ bootstrap-sass’,’~ > 3.2.0.2’

就像这里看到的

  1. 接下来你得跑了

    $bundle 安装

这是没有人提到的部分

打开 config/application.rb 文件

  1. 在倒数第二个前面加上这个

    Preedit + =% w (* . png * . jpg * . jpeg * . gif)

正如这里所看到的,页面下降了20% 。

  1. 接下来在这个目录中创建 custom.css.scss 文件

    应用程序/资产/样式表

正如这里所看到的,离上面的任务再往下一点

  1. 在该文件中包括

    @ import“ bootstrap”;


现在停止服务器并重新启动,一切都会正常运行。

我尝试不使用 gem 运行 bootstrap,但它对我不起作用。

希望这能帮到别人!

我正在使用 Rails4.0,遇到了同样的问题

这是我通过测试的解决方案

添加到 Gemfile

gem 'bootstrap-sass'

快跑

bundle install

然后添加到 app/asset/javascript/application.js

//= require bootstrap

那么下拉框应该可以工作

顺便说一下,克里斯的解决方案也适合我。

但我认为,它不太符合资产管道的想法

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>

我有一个自举 + 轨道项目,下拉工作良好。 更新后他们停下来工作..。

这就是解决这个问题的方法,将以下内容添加到.js 文件中:

$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});

将 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>

如果任何人仍然面临同样的问题,一定要检查您的 视图页面源代码在您的浏览器,以检查是否所有的 jquery 和 bootstrap 文件加载和文件的路径是正确的。最重要的!确保使用最新的稳定的 jquery 文件。

我认为这是路由文件的路由问题,而不是引导程序或者 JQuery 文件。

在我的例子中,关闭 Chrome 扩展修复了它。我把它们一个一个从 Chrome 中移除,直到找到罪魁祸首。

因为我是这个冒犯的 Chrome 扩展的作者,我想我最好修复这个扩展!

我在使用 ASP 时遇到了这个问题。NET 表格。我使用的解决方案是从母版页中的 <asp:ScriptManager runat="server">中删除或注释掉 jQuery 和 Bootstrap 引用。它似乎与您放在 <header>中的 jQuery 和 Bootstrap 引用产生了冲突。

我的引导程序版本指向引导程序4-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-β

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>

然后就开始起作用了

问题是 href 是 href = “ #”,您必须在所有标记中删除 href = “ #”

对于 Bootstrap 4,您需要一个额外的库。 如果您读取了浏览器控制台,Bootstrap 实际上会打印一条错误消息,告诉您需要它才能下拉工作。

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

在有角度的项目中,我们添加了 angle-cli. json 或 angular.json 这些线条:

      "scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"


],

根据 getbootstrap.com (版本4) ,下拉列表是建立在第三方库 Popper.js 上的。因此,如果下拉菜单不能在单击时工作,而只能在包括 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>

Https://getbootstrap.com/docs/4.0/components/dropdowns/

也许有人能从中受益:

摘要(又名 tl; dr)

由于从 django-bootstrap3版本 6.2.2升级到 11.0.0,Bootstrap 下拉列表停止下拉。

背景资料

我们遇到了类似的问题,在遗留的 django站点,严重依赖于 bootstrap通过 django-bootstrap3。该站点一直运行良好,并继续在生产中这样做,但不是在我们的本地测试系统。代码中没有明显的相关变化,所以很可能是依赖性问题。

症状

当访问 本地 django 测试服务器上的站点时,第一眼看上去完全没问题: 按照预期使用 bootstrap的样式/布局,包括导航栏。但是,所有下拉菜单都无法下拉。

浏览器控制台中没有错误。所有静态 jscss文件都已成功加载,依赖于 jquery的其他包的功能正在按预期工作。

解决方案

事实证明,我们的本地 python 环境中的 django-bootstrap3包已经升级到最新版本 11.0.0,而站点是使用 6.2.2构建的。

回到 django-bootstrap3==6.2.2为我们解决了这个问题,尽管我不知道究竟是什么原因造成的。

我尝试了以上所有的答案和唯一的版本谁为我工作的是 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>

如果您在 < em > Ruby on Rails 中遇到问题,引导 Ruby Gem 自述文件提供了详尽的解决方案。

简而言之:

  1. application.css重命名为 application.scss
  2. 加入 @import "bootstrap";
  3. gem 'jquery-rails'添加到 Gemfile,除非它存在。
  4. Add < code >//= demand jquery3添加 < code >//= 需要 jquery3 我需要波普 //= 需要自举 //= 需要引导链轮 到 application.js

我在使用 pug 和 node js 时遇到了这个问题。 问题是我的 jquery 版本。我只是谷歌和使用 cdn 链接到最新的 Jquery 版本,这导致了问题。 Jquery 和 Popper js 是 bootstrap 的依赖项。

为了解决这个问题,我使用了上面提到的这些库的推荐版本 给你

对 bootstrap.bundle.min 的两个链接导致了这个问题,请确保我们只调用它一次