Bootstrap 中的居中导航项目
在 Bootstrap 4 中，将导航项目（链接）对齐到导航栏的中心可以通过使用弹性盒属性。方法如下：
<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">...</button>
<a class="navbar-brand" href="#">...</a>
<div class="collapse navbar-collapse mr-auto">CSS:
.navbar {
display: flex;
justify-content: center;
}上面的代码使用flexbox的display属性将导航栏设置为flex容器，并使用justify-content将导航项与中心。 Bootstrap 的折叠类用于隐藏较小屏幕尺寸上的导航项。
响应式调整
为了响应性，您可以使用 Bootstrap 的 mr-auto 实用程序类来确保导航项目与浏览器大小正确居中更改：
<div class="collapse navbar-collapse mr-auto">
示例
考虑以下代码：
<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">...</button>
<a class="navbar-brand" href="#">...</a>
<div class="collapse navbar-collapse mr-auto">CSS：
@media (min-width: 768px) {
.navbar-nav {
justify-content: center;
}
}这个代码添加了一个媒体查询，当浏览器窗口宽度大于时，该查询相应地设置 justify-content 768px，仅在较大屏幕上将导航项居中。
以上是如何将 Bootstrap 4 导航栏中的导航项居中？的详细内容。更多信息请关注PHP中文网其他相关文章！
