Bootstrap 5如何实现一组菜单按钮左对齐另一组同行右对齐

问题根因 #

1. 结构嵌套错误：原有代码把左侧导航、右侧导航都放在了同一个nav-item dropdown的li标签内部，两个ul默认是块级元素，自然会上下换行显示。
2. 类名过时：Bootstrap 5已经废弃了navbar-left、navbar-right这类旧版本的对齐类，改用Flex布局工具类实现对齐效果。

修正后代码 #

<div class="collapse navbar-collapse" id="epNavbar">
  <!-- 左侧按钮组 -->
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item dropdown">
      <a type="button" class="btn btn-colour1 nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Administration<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a></li>
        <li><a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a type="button" class="btn btn-colour1 nav-link" href="AccountUpdate.html">Account Update</a>
    </li>
    <li class="nav-item">
      <a type="button" class="btn btn-colour1 nav-link" href="ExerciseAdmin.html">Exercise Library</a>
    </li>
  </ul>
  <!-- 右侧按钮组 -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a type="button" class="btn btn-success nav-link" href="LoginRoleSelect.html">Select Role</a>
    </li>
    <li class="nav-item">
      <a type="button" class="btn btn-danger nav-link" href="Login.html">Log out</a>
    </li>
  </ul>
</div>
<!-- /.navbar-collapse -->

核心修改说明 #

• 移除了多余的嵌套层级，把左右两个按钮组ul直接作为navbar-collapse的直接子元素，navbar-collapse本身默认是Flex布局，子元素默认横向排列
• 左侧按钮组ul保留me-auto类，该类会自动为元素右侧添加自适应外边距，把后续的右侧按钮组推到容器最右端
• 为所有导航项li添加nav-item类，导航链接a添加nav-link类，符合Bootstrap 5导航栏的样式规范，避免出现间距、对齐异常

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