如何将 Bootstrap 导航栏中的元素居中？

将 Bootstrap 导航栏中的元素居中

尝试将 Bootstrap 导航栏中的元素居中时，这似乎具有挑战性。但是，通过正确的技术，这是可以实现的。

Bootstrap 4 及更高版本

Bootstrap 4 及更高版本使用 Flexbox，这简化了对齐过程。要将元素（例如“网站名称”）居中，请将“mx-auto”类添加到包含该元素的“nav.navbar-nav”中。这会将其相对于左右“nav.navbar-nav”元素居中。

例如：

<nav class="navbar navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Download</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Register</a>
      </li>
    </ul>

    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Rates</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

以前的 Bootstrap 版本

对于 Bootstrap 4 之前的版本，需要使用 Flexbox 嵌套或position:absolute居中

其他选项

如果导航栏仅包含一个“nav.navbar-nav”，您可以使用“justify-content-center”将其居中内容。

绝对居中

要实现绝对居中，可以使用position:absolute方法或者flexbox嵌套。

绝对位置

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Flexbox 嵌套

嵌套另一个 Flexbox 容器中居中的项目，应用了“justify-content-center”和“flex-fill”。

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

以上是如何将 Bootstrap 导航栏中的元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！