时间戳

首页 > 解决方案 > Bootstrap nav-item 定位在 justify-content-center 之外

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

问题描述

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

我曾尝试使用：

导航容器和按钮的屏幕截图需要在右侧定位：

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

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>

标签： htmlcsstwitter-bootstrapflexbox

解决方案

你几乎走在了正确的轨道上。

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

这是小提琴：JSFiddle

推荐阅读