在 Bootstrap 5 中，要将 navbar 中的特定元素（如“Log In”和“Sign Up”）右对齐，需先让 .navbar-nav 占满剩余空间（使用 w-100 或 flex-fill），再配合 ms-auto（或响应式 ms-sm-auto）实现右侧定位。

在 bootstrap 5 中，要将 navbar 中的特定元素（如“log in”和“sign up”）右对齐，需先让 `.navbar-nav` 占满剩余空间（使用 `w-100` 或 `flex-fill`），再配合 `ms-auto`（或响应式 `ms-sm-auto`）实现右侧定位。

默认情况下，.navbar-nav 是一个内联 flex 容器，其宽度由子项内容决定，不会自动撑满父容器。因此，直接对内部链接添加 ms-auto 不会生效——因为没有“剩余空间”可供分配 margin。

✅ 正确做法是：

1. 为 .navbar-nav 添加 w-100（或 flex-fill），使其在 navbar 内占据全部可用水平空间；
2. 对需要右对齐的第一个元素（如“Log In”）添加 ms-auto（或更推荐的 ms-sm-auto，仅在 ≥576px 断点生效，避免移动端错位）；
3. 后续同级元素（如“Sign Up”）将自然紧随其后，保持右侧布局。

以下是完整、可直接运行的示例代码：

<nav class="navbar navbar-dark bg-dark navbar-expand-sm"><a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPractice">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarPractice">
    <!-- 关键：w-100 让 navbar-nav 撑满整行 -->
    <div class="navbar-nav w-100">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
      <a class="nav-link" href="#">About</a>
      <a class="nav-link" href="#">Support</a>
      <!-- ms-sm-auto 实现响应式右对齐（小屏下恢复为默认流式布局） -->
      <a class="nav-link ms-sm-auto" href="#">Log In</a>
      <a class="nav-link" href="#">Sign Up</a>
    </div>
  </div>
</nav>

⚠️ 注意事项：

• ❌ 不要对整个
  外层加 ms-auto——这会使整个导航组右移，破坏左侧品牌和菜单结构；
• ✅ 推荐使用 ms-sm-auto 而非 ms-auto，确保在移动端（折叠状态）下登录/注册按钮仍显示在折叠菜单中，而非被挤出视口；
• 替代方案：也可用 flex-fill 替代 w-100（语义更准确，表示“弹性填充剩余空间”），效果一致；
• 若需两元素之间有间距，可在第二个元素上添加 ms-2 等间距工具类。

通过这一组合策略，你就能精准、响应式地将任意数量的 navbar 元素锚定至右侧，同时保持 Bootstrap 5 的原生行为与可访问性标准。