Bootstrap nav-item 定位在 justify-content-center 之外

Question

我正在努力将作为导航容器的按钮定位到屏幕右侧。所有其他导航项都需要在中心，所以我正在使用 justify 内容中心。

我试过用：

• margin-left:auto 在按钮上，但它会移动左侧的其他链接。
• 删除 nav 上的 justify-content-center 并在按钮上添加 flex-shrink:1 和 margin-left: auto。
• 将按钮移到 nav flex 组之外，但随后按钮出现在下一行。

导航容器的屏幕截图和右侧需要放置的按钮：

HTML：

<ul class="nav justify-content-center">
  <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#">Places</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#">Careers</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#">Blog</a>
  </li>
  <button type="button" class="btn btn-primary">Primary</button>
</ul>

Answer 1

你几乎是在正确的轨道上。

您需要将按钮从列表中取出，然后将列表和按钮的整个封闭导航声明为具有中心的 flex。这或多或少会导致您现在拥有的相同内容，但它将列表和按钮作为单独的项目。然后，您将使用flex-grow-1 或flex-fill 类获取列表并使其尽可能增长到最后。这会将按钮推到最右边，仍然在同一行。

这是小提琴：JSFiddle