为什么 bootstrap 下拉菜单不起作用？

Question

我确信这是一个小错误，但我似乎无法发现它。我在这里关注这个 edureka 指南： https://youtu.be/jeZ-URjZM_M?t=978

这是代码：

<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div id="dropdown" class="dropdown-menu" x-placement="bottom-start">
        <a href="#" class="dropdown-item">Home</a>
        <a href="#" class="dropdown-item">shop</a>
        <a href="#" class="dropdown-item">cart</a>
        <a href="#" class="dropdown-item">checkout</a>

干杯

Answer 1

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Answer 2

假设您正在使用问题标签中所述的 Bootstrap 4...

您是否包括此处所述的所有必需资源？

https://getbootstrap.com/docs/4.0/getting-started/introduction/

无论如何，如您所见，从 Boostrap4 网站复制的演示可以正常工作：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button" id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

为什么 bootstrap 下拉菜单不起作用？

why doesn't bootstrap dropdown-menu work?

html

bootstrap-4