已删除已删除

Question

已删除 已删除 已删除 已删除 已删除

Answer 1

在Bootstrap中，下拉菜单默认在鼠标点击时运行，如果你想在鼠标悬停时显示下拉菜单，那么你必须使用css或js

我用过css

.dropdown:hover ul.dropdown-menu{ display: block; }

.dropdown:hover ul.dropdown-menu{ display: block; }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Services
    </button>
    <ul class="dropdown-menu">
      <li><h6 class="dropdown-header">Dropdown header</h6></li>
      <li><a class="dropdown-item" href="#">Rewiring</a></li>
      <li><a class="dropdown-item" href="#">Light Fixes</a></li>
      <li><a class="dropdown-item" href="#">Showers</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Rewiring</a></li>
      <li><a class="dropdown-item" href="#">Light Fixes</a></li>
      <li><a class="dropdown-item" href="#">Showers</a></li>
    </ul>
  </div>

Answer 2

更多事情要在这里讨论：

1. BS 中的打开下拉菜单是由

   Popper.js

   完成的（不是

   bootstrap.min.js

   的一部分）。因此，为了使下拉菜单正常工作，您需要通过捆绑包加载 Bootstrap JS，其中包含 Popper.js https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.bundle.min.js

2. 由于您使用的是BS5，因此需要将

   data-toggle="dropdown"

   更改为

   data-bs-toggle="dropdown"

   。这是从版本 5 开始的新标记。

3. 正如另一个答案中提到的，点击（而不是悬停）打开下拉菜单是 BS 哲学的核心部分（不幸的是）。因此，如果您想在悬停时打开子菜单，则必须添加额外的 CSS。

4. 还要小心标记。使用BS推荐的结构进行导航会更干净（使用

   <ul>

   ，

   <li>

   等）

Answer 3

改变

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a> 

到

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>

将其更改为按钮即可使用！！