Bootstrap 5：如何将单个nav-item移至导航栏右侧

你可以通过拆分导航列表的方式实现单个菜单项右移，具体修改如下：

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <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 mb-2 mb-lg-0">
        <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" href="#">Link</a>
        </li>
      </ul>
      <!-- 右侧单独菜单项列表，ms-auto 实现左间距自动填充，将列表推到右侧 -->
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

为什么之前的尝试无效？ #

• justify-content-end 是flex容器的布局类，给单个nav-item添加不会生效——它是flex子项，而非容器，无法控制自身的对齐方式。
• 给原ul加ms-auto会让整个列表右移，因为ms-auto会给元素左侧添加自动margin，直接把整个列表推到导航栏最右侧。

补充写法（保留左侧列表靠左） #

如果需要让左侧列表保持靠左对齐，也可以给左侧列表添加me-auto类，效果一致：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <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" href="#">Link</a>
    </li>
  </ul>
  <ul class="navbar-nav mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</div>

me-auto会给左侧列表右侧添加自动margin，把右侧的单独列表挤到导航栏最右端。

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