Bootstrap 我无法运行“下拉”命令,“当您按下按钮时，链接应该会出现,”

kognpnkq 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(135)

当我按下下拉按钮时，链接应该是一个接一个排序的。但是我做不到。我正在使用Bootstrap。顺便说一下，我几乎是新的软件。这可能是一个简单的问题。

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Dropdown button
    </button>

    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Link 1</a>
        <a href="#" class="dropdown-item">Link 2</a>
        <a href="#" class="dropdown-item">Link 3</a>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73169026/i-couldnt-run-my-dropdown-command-when-you-press-the-button-the-links-shou

2条答案

按热度按时间

quhf5bfb1#

你需要包括“popper.js”库。如果我研究的正确的话，它就是 Bootstrap 用于下拉机制的。所以这段代码可以工作;

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />

  <!-- Bootstrap CSS -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"
  />

  <title>Hello, world!</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">Link 1</a>
      <a href="#" class="dropdown-item">Link 2</a>
      <a href="#" class="dropdown-item">Link 3</a>
    </div>
  </div>
</body>
<script
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
  integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
  integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
  crossorigin="anonymous"
></script>
</html>

赞(0）回复(0）举报 2022-12-08

tnkciper2#

只需将data-bs-toggle=“dropdown”属性添加到dropdown-toggle按钮。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">Dropdown button</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Link 1</a>
        <a href="#" class="dropdown-item">Link 2</a>
        <a href="#" class="dropdown-item">Link 3</a>
    </div>
</div>

Codepen现场：https://codepen.io/Superawdi/pen/jOzYrvX

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 我无法运行“下拉”命令,“当您按下按钮时，链接应该会出现,”

2条答案

相关问题

热门标签

最新问答