如何将HTML+Bootstrap导航栏元素移至两端并修复汉堡按钮功能？

问题总结 #

• 桌面端：标题与导航链接未实现两端对齐
• 移动端：汉堡按钮点击无展开效果，布局对齐异常

修复步骤 #

1. 修复汉堡按钮失效问题 #

汉堡按钮无反应是因为折叠容器的id属性错误：原代码中div.collapse的id写为#navbarSupportedContent，而data-bs-target指向的是#navbarSupportedContent，两者不匹配（id不需要带#）。需将id改为navbarSupportedContent。

2. 实现两端对齐与布局修正 #

• 给导航栏内部的.container添加d-flex justify-content-between align-items-center类，让容器内元素自动两端对齐并垂直居中
• 移除header上的justify-content-center和flex-wrap类，避免标题居中或换行破坏布局
• 将标题链接替换为navbar-brand类，贴合Bootstrap导航栏规范，保持样式一致性

修正后的完整代码 #

<div class="container">
  <nav class="navbar navbar-expand-lg">
    <div class="container d-flex justify-content-between align-items-center">
      <h2>
        <a href="/" class="navbar-brand text-decoration-none link-dark">CAFÉ - 82</a>
      </h2>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav pb-2">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

内容的提问来源于stack exchange，提问作者Santiago S. M.