导航栏折叠不会折叠引导程序答案

【问题标题】：navbar collapse does not collapse bootstrap导航栏折叠不会折叠引导程序
【发布时间】：2021-12-08 13:43:24
【问题描述】：

我对 html 很陌生，只是试图让 boostrap 导航栏折叠但它不起作用，按钮显示但它不起作用，这个论坛上有很多关于这个问题的不同问题但到目前为止还没有一个工作。我知道我错过了一件简单的事情，但我似乎找不到在哪里。

<nav class="navbar navbar-expand-lg navbar-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse navbar-dark" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="bookreviews.html"><i style="font-size: 17px;" class="fa fa-fw fa-book-open"></i> Book Reviews</a>
      <a class="nav-item nav-link" href="#"><i style="font-size: 17px" class="fa fa-fw fa-envelope"></i> Contact us</a>
      <a class="nav-item nav-link" href="#">About us</a>
      <a class="nav-item nav-link disabled" href="#">Pricings</a>
      <a class="nav-item nav-link disabled" href="#"><i style="font-size: 17px;" class="fa fa-fw fa-user"></i> Login</a>
    </div>
  </div>
</nav>

编辑：我已经将这些包含在 head 部分中：

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">

    <!-- font awesome-->
    <script src="https://kit.fontawesome.com/52760ad3c3.js" crossorigin="anonymous"></script>

这在正文部分的底部：

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

已修复：只需将按钮的类更改为此（因为我使用的是另一个引导程序版本）：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

这里有示例正确链接 bootstrap 5 导航，与工作 toggler。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Boostrap 5 Navbar with toggler!</title>
</head>

<body>


  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a class="nav-link disabled">Disabled</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <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>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
</body>

</html>

【讨论】：

我试过你的，它确实有效，但我的仍然没有，是因为我在导航栏中有图标吗？
比较代码并检查.. ;-) 在我看来，您从不同版本的引导程序中添加了导航栏代码，我认为是较低版本...并且您已链接引导程序 5。这就是为什么这不起作用。祝你好运和最好的问候！

【解决方案2】：

您需要包含 scriptjs，否则导航折叠将不起作用 <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>

这里是文档https://getbootstrap.com/docs/4.0/components/navbar/的链接

【讨论】：

忘了提到我在我的身体底部包含了 bootstrap js，并在头部包含了 bootstrap css。还编辑了我的帖子。