如何在Bootstrap 5.3（v5.3.0-alpha1）中将导航栏项右对齐？

核心正确用法 #

在Bootstrap 5.3中，要将导航栏内的下拉导航项推到最右侧，正确的类是 ms-auto。但必须确保导航栏结构符合Bootstrap的规范，否则类无法生效。如果还需要下拉菜单展开后向右对齐（而非默认向左），还要给下拉菜单添加 dropdown-menu-end 类。

完整可运行示例代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">站点Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <!-- 左侧常规导航项 -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">文章</a>
        </li>
      </ul>
      <!-- 右侧下拉导航项，用ms-auto推到最右侧 -->
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
            用户菜单
          </a>
          <!-- dropdown-menu-end让下拉菜单本身右对齐 -->
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">个人中心</a></li>
            <li><a class="dropdown-item" href="#">设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

你之前尝试无效的原因及踩坑点 #

1. 类名版本混淆：Bootstrap 5弃用了Bootstrap 4的 mr-auto/ml-auto，统一使用 ms-auto（margin-start，对应原左margin）和 me-auto（margin-end，对应原右margin）；而 me-auto 是将元素向左推，和你要右对齐的需求完全相反。
2. 结构不符合规范：导航栏必须包裹在 container-fluid 或 container 内，且下拉项要放在 collapse navbar-collapse 容器中，否则 ms-auto 的自动margin无法触发正确的布局。
3. 混淆导航项对齐和下拉菜单对齐：ms-auto 负责将整个下拉触发项推到导航栏右侧，而如果需要下拉菜单展开后靠右对齐，必须额外添加 dropdown-menu-end 类。

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