Bootstrap 5导航栏汉堡切换按钮无法显示菜单问题排查

问题根源 #

你的代码里存在一个拼写错误：汉堡按钮的data-bs-toggle属性值写成了collpase，正确的拼写应该是collapse。Bootstrap的JavaScript组件依赖精准的属性标识来绑定交互逻辑，这个拼写错误导致按钮无法正确触发菜单的折叠/展开功能。

修正后的完整代码 #

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

<head>
  <meta charset="UTF-8" />
  <!-- Bootstrap CSS -->     
  <link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NavBar</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">NavBar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- menu items -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link active">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Explore</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

  
  <!-- Add scripts needed for bootstrap to work -->    
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
    crossorigin="anonymous"
  >
  </script>
</body>
</html>

额外说明 #

• 你已经正确引入了Bootstrap 5的CSS和包含Popper的bootstrap.bundle.min.js，这部分没有问题
• 菜单容器的id和按钮的data-bs-target值匹配正确，修正拼写后即可正常触发交互

内容的提问来源于stack exchange，提问作者poojaprabhu28