如何将 Bootstrap 4 导航栏中的导航项居中？

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">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.navbar {
    display: flex;
    justify-content: center;
}

上面的代码使用flexbox的display属性将导航栏设置为flex容器，并使用justify-content将导航项与中心。 Bootstrap 的折叠类用于隐藏较小屏幕尺寸上的导航项。

响应式调整

为了响应性，您可以使用 Bootstrap 的 mr-auto 实用程序类来确保导航项目与浏览器大小正确居中更改：

<div class="collapse navbar-collapse mr-auto">
<p><strong>示例</strong></p>
<p>考虑以下代码：</p>
<pre class="brush:php;toolbar:false"><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">
<p>CSS：</p>
<pre class="brush:php;toolbar:false">@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

这个代码添加了一个媒体查询，当浏览器窗口宽度大于时，该查询相应地设置 justify-content 768px，仅在较大屏幕上将导航项居中。