Bootstrap 4.1 js 不工作答案

【问题标题】：Bootstrap 4.1 js not workingBootstrap 4.1 js 不工作
【发布时间】：2018-12-16 22:18:20
【问题描述】：

我正在尝试引导，但 js 在导航中不起作用（下拉菜单 + 移动图标）

这是我的html：

  <div class="collapse navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">TEST <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Pulse <span class="caret"></span></a>
          <div class="dropdown-menu" aria-labelledby="download">
            <a class="dropdown-item" href="https://jsfiddle.net/bootswatch/0mb9487u/">Open in JSFiddle</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="../4/pulse/bootstrap.min.css">bootstrap.min.css</a>
            <a class="dropdown-item" href="../4/pulse/bootstrap.css">bootstrap.css</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="../4/pulse/_variables.scss">_variables.scss</a>
            <a class="dropdown-item" href="../4/pulse/_bootswatch.scss">_bootswatch.scss</a>
          </div>
        </li>
    </ul>
  </div>
</nav>

其他与引导有关的 js 问题对我没有帮助...

【问题讨论】：

CSS 和 JS 应该在 head 中声明。

标签： javascript html css twitter-bootstrap

【解决方案1】：

不知道你在你的html中导入了哪些文件，但是如果你没有导入bundle js文件，那么你也需要导入popper.js文件。总共需要以下 4 个文件才能使引导程序正常工作：

bootstrap.min.css
jquery（推荐最新，查看引导文档）
popper.js
bootstrap.min.js

数字 2、3、4 - 顺序很重要

希望对您有所帮助...

【讨论】：

我解决了。这是所需 js 文件中的顺序问题。我不得不用 jquery > popper > bootstrap 更改顺序

【解决方案2】：

确保您必须在 head 部分中添加所有这些 cdn

MaxCDN 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。您还必须包含 jQuery：

最大CDN：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

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

【讨论】：

【解决方案3】：

我从未见过这样的事情，我想知道您是如何想出以这种方式使用引导程序的。你这样做完全错误，你没有直接在 html 标签中导入 .css/.js 文件，你在代码中的适当位置指定这些库。您需要从头开始阅读有关如何使用引导程序的信息，示例好的源代码在这里： https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

【讨论】：