Bootstrap 5导航栏：仅将最后3个nav-items移至右侧

你之前用ms-auto导致所有项右移，是因为把这个类加在了整个navbar-nav上，正确的做法是把需要右对齐的项和左侧项分开处理，下面提供两种可行方案：

方案一：拆分导航项容器（推荐，语义化） #

将左侧项和需要右移的3个项分别放在两个独立的navbar-nav容器中，给右侧容器添加ms-auto类，利用flex布局的margin-left: auto特性将其推到右侧：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">你的品牌</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <!-- 左侧导航项 -->
      <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>
        <li class="nav-item">
          <a class="nav-link" href="#">定价</a>
        </li>
      </ul>
      <!-- 右侧3个导航项 -->
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">个人中心</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">设置</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">退出登录</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

方案二：插入填充元素（无需拆分结构） #

如果不想改变原有导航项的结构，可以在左侧项和右侧项之间插入一个flex-grow-1的空div，让它占据中间所有剩余空间，从而把后面的3个项挤到右侧：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">你的品牌</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <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>
        <li class="nav-item">
          <a class="nav-link" href="#">定价</a>
        </li>
        <!-- 插入填充元素，占据中间空间 -->
        <div class="flex-grow-1"></div>
        <li class="nav-item">
          <a class="nav-link" href="#">个人中心</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">设置</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">退出登录</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

原理说明 #

Bootstrap 5的navbar-collapse是flex布局容器，ms-auto会给元素添加margin-left: auto，在flex容器中这个样式会将元素推到容器的末端（右侧）；而flex-grow-1会让元素自动填充剩余的可用空间，从而分隔开左右两侧的导航项。

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