Bootstrap导航栏无法正常折叠问题求助

你的Bootstrap导航栏出现折叠失效、菜单项堆叠的问题，主要是以下几个代码错误导致的：

1. 导航栏结构层级错误 #

Bootstrap的navbar要求导航栏内的核心元素（品牌、切换按钮、折叠内容）需要统一包裹在container-fluid或container容器中，而不是将折叠内容单独放在container-fluid里。原代码中nav直接包含navbar-brand、切换按钮，再单独给折叠内容套container-fluid，破坏了navbar的flex布局结构，导致元素无法响应式排列。

2. 菜单项类名使用错误 #

• 列表项的类名应为nav-item，而非navbar-item
• 菜单链接的类名应为nav-link，而非navbar-brand（navbar-brand仅用于品牌标识，重复使用会引发样式冲突，让菜单元素变成块级堆叠）

3. 无障碍属性不匹配 #

切换按钮的aria-controls属性值必须和折叠容器的id一致，原代码里按钮的aria-controls="navbarToggleExternalContent"，但折叠容器的id是collapsibleNavbar，这会影响无障碍访问体验。

修正后的完整代码 #

<nav class="navbar navbar-light navbar-expand-md">
  <div class="container-fluid">
    <a class="navbar-brand logo" href="index.html">Just-Repeat </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapsibleNavbar"
      aria-controls="collapsibleNavbar"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <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="index.html">News </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.html">Contact </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.html">Privacy </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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