在 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中文网其他相关文章！
