如何将 Bootstrap 导航栏中的元素居中？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-12-14 01:49:09

原创

960 人浏览过

How do I center an element within a Bootstrap Navbar?

将 Bootstrap 导航栏中的元素居中

问题： 尽管进行了各种尝试，用户仍无法将 Bootstrap 中的元素居中导航栏。

答案：

Bootstrap 5 (2021)

导航栏使用 Flexbox，允许您使用 mx-auto 类将元素居中。

<nav class="navbar navbar-expand-md 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>

登录后复制

引导程序 4.1

对于 Bootstrap 4.1 及更高版本，使用 mx-auto 而不是 pull-left 和 pull-right 来对齐左右菜单：

<nav class="navbar navbar-expand-md 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>

登录后复制

其他居中选项

position:absolute;:设置元素居中位置为position:absolute;并使用变换：translateX(-50%);.
Flexbox嵌套：使居中的项目也显示：flexbox和justify-content：center。

请记住，这些解决方案可能有缺点，例如无法将居中元素与不同的相邻元素完美对齐

附加说明：

请务必将 main-nav 替换为您想要的导航栏类名称。
如果您的导航栏有单个 navbar-nav，使用 justify-content-center 将其居中。
到在桌面上将元素居中，但在移动设备上将它们向左对齐，使用媒体查询。
探索 [Bootstrap 文档](https://getbootstrap.com/docs/4.5/components/navbar/) 以获取有关导航栏的更多信息定制。

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