如何在 Bootstrap 4 导航栏中精确居中导航链接？

在 Bootstrap 中居中导航项目

在 Bootstrap 4 导航栏中居中导航链接的任务（相对于浏览器窗口大小）事实证明这是一个共同的挑战。虽然使用 ml-auto 和 mr-auto 的简单解决方案可能很接近，但它无法实现精确居中。

为了解决这个问题，我们提供了一种响应式地利用 flexbox 和 margin 实用程序的综合方法。

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">

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>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

视口中的精确链接居中

如果您需要在视图中精确居中链接视口，尝试这种方法：

<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>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

请参阅提供的链接以获取导航栏的更多示例Bootstrap 4 中的对齐方式。

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