Bootstrap 4下拉菜单有问题答案

【问题标题】：Having trouble with Bootstrap 4 dropdown menuBootstrap 4下拉菜单有问题
【发布时间】：2020-05-31 01:03:15
【问题描述】：

由于某种原因，我的下拉菜单在 bootstrap4 中不起作用。我有 jquery、bootstrap，但我不完全确定 popper 是否正确导入。想知道是否有人可以指出我是否做错了什么。

<!DOCTYPE html>
<html>
<head>
    <title>Learning BootStrap</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/jquery.min.js"  ></script>

    <script src="js/bootstrap.min.js" ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>



</head>

<body>


<p class="lead text-center">This is my website.</p>
<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button/>
    <div class="dropdown-menu">

        <a href="#" class="dropdown-item">first link</a>
        <a href="#" class="dropdown-item">second link</a>
        <a href="#" class="dropdown-item">third link</a>


</div>
</div>






</body>
</html>

【问题讨论】：

把你的脚本放在正文标签之前。
并将 popper 放在 bootstrap 之前。
还是不行。
检查路径是否正确...

标签： html bootstrap-4 popper.js

【解决方案1】：

交换 bootstrap 和 popper.js 脚本标签的顺序，所以 bootstrap 是最后加载的。

jquery
popper.js
引导

【讨论】：

再次检查您的脚本文件。它们是否可以正确访问/加载？您也可以尝试使用 cdn 而不是本地的 bootstrap 和 jquery 来检查它们是否是问题。
在getbootstrap.com/docs/4.4/getting-started/introduction的引导程序介绍示例中定位自己
所以如果我的 popper.min.js 在一个名为 js 的文件夹中，我应该将其称为
理论上是的。注意：文件夹 js 应该和你的 html 文件在同一个文件夹中。

【解决方案2】：

您下载的版本可能是缩小版。我这样说是因为它指的是 js/bootstrap.min.js 之类的东西。

您必须在stackpath link 的帮助下包含jquery 和popper，它们在bootstrap 下载版本中不可用。下面是您应该使用的代码，以使该下拉菜单可用！

<!DOCTYPE html>
<html>

<head>
  <title>Learning BootStrap</title>



<!-- ----------------------------Link you have to include before your css and js file -->

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
  </script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>



  <!-- ----------------------------Your File --> 

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/bootstrap.min.js"></script>


</head>

<body>


  <p class="lead text-center">This is my website.</p>
  <div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button>
    <div class="dropdown-menu">

      <a href="#" class="dropdown-item">first link</a>
      <a href="#" class="dropdown-item">second link</a>
      <a href="#" class="dropdown-item">third link</a>


    </div>
  </div>





</body>


</html>

【讨论】：