bootstrap 上的汉堡按钮打不开

Question

我遵循了 BootStrap 中的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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>

<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="index.html">One Basket</a>
  <button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
         <span class="navbar-toggler-icon"></span>
       </button>
  <div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

我还添加了 bootstrap 文档中的 CSS 和 javascript 到 HTML 文件。 JS 在关闭正文标记之前的末尾，就像它在 bootstrap 网站上所说的那样。

CSS 是头部的第一个 link 标签。但是当我尝试按下按钮时没有任何反应。

Answer 1

你有错误的属性使其默认工作，只需将 data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" 替换为 data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2"，请参阅（在我的 CodeSnippet 中我使用 BS v5.1）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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>


<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="index.html">One Basket</a>
  <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">          
     <span class="navbar-toggler-icon"></span>
   </button>
  <div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

bootstrap 上的汉堡按钮打不开

Hamburger button on bootstrap wont open

html

javascript

css

twitter-bootstrap