Bootstrap 4下拉菜单有问题

Question

For some reason, my dropdown menu doesn't function in bootstrap4.出于某种原因，我的下拉菜单在 bootstrap4 中没有 function。 I have jquery, bootstrap, and I'm not totally sure if popper was properly imported.我有 jquery，引导程序，我不完全确定 popper 是否正确导入。 Was wondering if anyone could point me as to if I did something wrong.想知道是否有人可以指出我是否做错了什么。

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

Answer 1

Swap the order of your bootstrap and popper.js script tags, so bootstrap is the very last to load.交换 bootstrap 和 popper.js 脚本标签的顺序，因此 bootstrap 是最后加载的。

jquery jquery
popper.js popper.js
bootstrap引导程序

Answer 2

The version you have downloaded is probably a minified version.您下载的版本可能是缩小版。 I am saying this because it is referring something like js/bootstrap.min.js .我这样说是因为它指的是js/bootstrap.min.js之类的东西。

You have to include jquery and popper with the help of stackpath link they are not available in bootstrap Downloaded version.您必须在stackpath link的帮助下包含jquery和popper ，它们在bootstrap下载版本中不可用。 below is the code that you should be using in order to make that dropdown workable!下面是您应该使用的代码，以使该下拉菜单可用！

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

Bootstrap 4下拉菜单有问题

问题描述

2 个解决方案

解决方案1
0 2020-05-31 01:11:25

解决方案2
0 2020-05-31 05:07:13

Bootstrap 4下拉菜单有问题

问题描述

2 个解决方案

解决方案1 0 2020-05-31 01:11:25

解决方案2 0 2020-05-31 05:07:13

解决方案1
0 2020-05-31 01:11:25

解决方案2
0 2020-05-31 05:07:13