如何在 Bootstrap 导航栏中完美地居中导航项？

在 Bootstrap 中居中导航项目

挑战

在 Bootstrap 中，根据浏览器窗口大小在导航栏中居中导航项目（链接）可以是一项棘手的任务。标准 Bootstrap 方法使用 mr-auto 和 ml-auto 类，根据浏览器窗口宽度减去徽标宽度有效地将导航居中。为了实现完美居中，我们需要更精确的解决方案。

解决方案

响应式使用 Flexbox 和 Margin 实用程序

Bootstrap 4 提供了 d- flex 和 mx-auto 类，它们使我们能够实现响应式居中。其实现方式如下：

<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 类使导航容器在中型屏幕（和更大）中灵活，并且将其显示设置为 Flex。
• .d-block 类针对较小的屏幕，并使导航容器成为
• .flex-row 类水平排列导航容器的子元素。
• .mx-md-auto 类在中型和更大屏幕中水平居中导航容器。
• .mx-0 类会删除较小屏幕中的水平边距，以确保正确对齐。
• .mr-auto 类右对齐折叠的导航项。

此方法根据浏览器窗口大小响应式地将导航项居中，确保完美对齐。

附加说明

• 对于 Bootstrap 4.1 及以上版本，可以直接在.navbar-nav 元素可以达到相同的效果。
• 如果您希望导航项在视口中精确居中，请考虑使用 CSS 网格方法。

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