Bootstrap 4.1 js 不工作

Question

我正在尝试引导程序，但 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 问题的其他主题对我没有帮助...

Answer 1

确保您必须在 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>

Answer 2

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

1. bootstrap.min.css
2. jquery（推荐最新版本，查看 bootstrap 文档）
3. 波普尔.js
4. bootstrap.min.js

数字 2、3、4 - 顺序问题

希望有帮助...