Bootstrap5折叠导航图标未在.navbar-brand后自动右对齐问题

问题原因 #

出现这个布局错位核心是两个写法不符合Bootstrap 5的规范：

1. 用了Bootstrap旧版本（3.x/4.x早期）的navbar-header类，这个类在BS5中已经被移除，没有内置的flex横向布局能力，没法自动控制子元素排列
2. 把折叠触发按钮navbar-toggler放在了navbar-brand容器内部，navbar-brand默认是块级元素，宽度会占满可用空间，按钮自然会被挤到h1标题下方靠左的位置，没法和标题同行靠右。

修复步骤 #

• 删除无作用的navbar-header外层包裹结构
• 将navbar-toggler按钮从navbar-brand内部移出，和品牌区、logo元素同级放置
• 给导航的container容器添加BS5内置flex工具类d-flex justify-content-between align-items-center，让内部元素自动横向排列、两端对齐、垂直居中
• 补全和按钮data-bs-target对应的折叠菜单容器（原代码漏写了id匹配的折叠区，会导致按钮点击无响应）

修正后完整代码 #

<header>
  <nav id="header-nav" class="navbar navbar-expand-md fixed-top">
    <div class="container d-flex justify-content-between align-items-center flex-wrap">
      <!-- 桌面端显示logo -->
      <a href="index.html" class="d-none d-md-block">
        <div id="logo-img" alt="Logo image"></div>
      </a>
      <!-- 站点品牌信息区 -->
      <div class="navbar-brand">
        <a href="index.html"><h1>David Chu's China Bistro</h1></a>
        <p class="mb-0">
          <img src="images/star-k-logo.png" alt="Kosher certification">
          <span>Kosher Certified</span>
        </p>
      </div>
      <!-- 导航折叠按钮 -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 折叠菜单容器 -->
      <div class="collapse navbar-collapse w-100" id="navbarTogglerDemo02">
        <!-- 此处放置导航菜单项即可 -->
      </div>
    </div>
  </nav>
</header>

效果说明 #

• 屏幕宽度≥768px（md断点）时，logo、品牌信息、展开的导航菜单正常横向排列
• 屏幕宽度<768px进入折叠状态时，折叠按钮自动对齐到容器最右侧，和站点标题保持同一行，不会错位跑到标题下方
• 折叠菜单容器添加了w-100类，保证展开后菜单占满整行宽度，不会挤在品牌区旁边
• 品牌区的认证信息标签添加了mb-0类，去掉默认下边距避免导航高度异常

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