Bootstrap 5汉堡菜单始终展开无法折叠问题求助

你的导航栏出现汉堡菜单默认展开、按钮无交互、布局异常的问题，是代码里存在几处拼写错误和必要资源缺失，逐个修正即可：

1. 引入Bootstrap JavaScript文件 #

Bootstrap 5的折叠交互依赖官方JS文件，必须在</body>标签前添加该资源，否则汉堡按钮的点击逻辑无法生效：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

2. 修正导航栏断点类 #

将navbar-expand-medium改为Bootstrap标准断点类navbar-expand-md，这是中等屏幕（≥768px）下自动展开导航栏的正确标识。

3. 修正折叠容器的类拼写 #

把collpase改为正确的collapse，拼写错误会导致Bootstrap无法识别折叠容器，进而让菜单始终处于展开状态。

4. 修正汉堡按钮的属性 #

• 将data-bs-toggler改为data-bs-toggle，这是Bootstrap触发折叠功能的正确属性名
• data-bs-target的值需要添加#前缀，改为data-bs-target="#collapsibleNavbar"，必须通过ID选择器才能正确关联折叠容器

修复后的完整导航栏代码 #

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Southwest Vet</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
 
  <body>
     <header>
       <nav class="navbar navbar-light navbar-expand-md fixed-top" id="navbar-site">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">Logo</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="featured">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="mission">Mission</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="staff">Staff</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="testimonials">Testimonials</a>
                </li>
              </ul>
            </div>
        </div>
      </nav>
    </header>
    <!-- 页面内容区域 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

额外说明：fixed-top会让导航栏固定在页面顶部，后续添加页面内容时，建议给<body>添加padding-top: 70px;（数值可根据导航栏高度调整），避免页面内容被导航栏遮挡。

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