Bootstrap 5导航栏元素对齐问题求助

我明白你被这个导航栏布局问题折腾好久了，试了各种方法都没搞定对吧？别担心，咱们来调整代码实现你要的效果：大屏时登录按钮在导航栏右侧末尾，小屏时在汉堡菜单左侧。

问题分析 #

你当前的代码里，登录按钮被放在了多余的嵌套div中，而且位置在汉堡菜单之后，这就导致小屏时它会跑到汉堡菜单下方；同时冗余的结构也干扰了Bootstrap的默认布局逻辑。

修改后的完整代码 #

<header class="header">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
      <!-- 品牌Logo -->
      <a class="navbar-brand" href="#">
        <img src="image/logo.png" alt="" width="150px" height="35px">
      </a>

      <!-- 登录按钮 - 调整位置到汉堡菜单前，确保小屏时在左侧 -->
      <ul class="navbar-nav ms-auto d-flex align-items-center">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Login</a>
        </li>
      </ul>

      <!-- 汉堡菜单按钮 -->
      <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 ms-auto mb-2">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

关键修改点说明 #

• 调整元素顺序：把登录按钮的ul移动到汉堡菜单按钮之前，这样屏幕缩小到md断点以下时，它会自然出现在汉堡菜单的左侧。
• 简化嵌套结构：移除了多余的div.login-nav，直接用Bootstrap原生的navbar-nav承载登录按钮，避免布局冲突。
• 垂直居中对齐：添加d-flex align-items-center类，确保登录按钮和Logo、汉堡菜单在垂直方向上居中对齐，视觉更协调。
• 大屏靠右布局：保留ms-auto类，让大屏状态下登录按钮自动对齐到导航栏的右侧末尾。

这样修改后就能完美实现你想要的布局效果啦～

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