如何在 Bootstrap 4 中居中导航项目？

在 Bootstrap 中居中导航项目

在 Bootstrap 4 中，可以使用 Flexbox 和边距实用程序来水平对齐导航项目（链接）。

Bootstrap 4 Alpha 6 和稍后

在 Bootstrap 4 alpha 6 及更高版本中将品牌和链接居中：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

在此代码中，使用 d-md-flex 和 d-block 类在中型及以上屏幕中水平对齐品牌和链接。 flex-row 类确保项目并排排列。 mx-md-auto 和 mx-0 类将项目置于可用空间中，并根据品牌图像的宽度进行调整。

Bootstrap 4.1

对于 Bootstrap 4.1:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">

在这种情况下，mx-auto 直接应用于navbar-nav 仅将链接居中。品牌可以使用其他技术居中，例如 justify-content-center。

在视口中精确定位链接

要将链接在视口中精确居中，请考虑此技术：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-nav">

这里，navbar-nav 被赋予固定的宽度，并且justify-content: center 将链接精确地对齐在屏幕中心。

有关进一步的自定义和其他示例，请参阅下面参考部分中提供的链接。

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