twitter-bootstrap 如何使用 Flexbox 在 Bootstrap 4 中居中导航栏

How to center navbar in Bootstrap 4 using Flexbox

提问by Parker Queen

Well, I want to achieve this thing:

好吧，我想实现这个目标：

using the Bootstrap 4 Navbar.

使用 Bootstrap 4 导航栏。

How can I centralize the nav-links/items in the middle of the viewport using the flexbox or .mr-autoetc utilities. I am trying to avoid a CSS based positioning approach because it may look off on different devices. But sure if a CSS approach promises to be at the same centralized position then why not!

如何使用 flexbox 或其他.mr-auto实用程序将导航链接/项目集中在视口中间。我试图避免基于 CSS 的定位方法，因为它可能会在不同的设备上出现。但是，如果 CSS 方法承诺处于相同的集中位置，那为什么不呢！

NOTE: some ppl might say to use the justify utilities, the problem is you can't use them as the .navbar-brandand the .navbar-navcan't be wrapped inside a <div>. If I do so, the layout messes up.

注意：有些人可能会说要使用 justify 实用程序，问题是您不能将它们用作 the.navbar-brand并且.navbar-nav不能将其包裹在<div>. 如果我这样做，布局就会混乱。

<nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">

    <div class="container">

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Disabled</a>
                </li>
            </ul>
        </div>

    </div>

</nav>

采纳答案by Zim

Use the flexbox utilities to align components the way you want. Here the justify-content-centeris used to center the navbar-nav.

使用 flexbox 实用程序以您想要的方式对齐组件。这里justify-content-center用于将navbar-nav.

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Brand</a>
    <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="collapse">Link</a>
            </li>
        </ul>

    </div>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href=""><i class="fa fa-facebook"></i></a></li>
        <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-twitter"></i></a></li>
    </ul>
</nav>

More Navbar alignment examples

更多导航栏对齐示例

Update Bootstrap 4.0.0

更新引导程序 4.0.0

navbar-toggleable-smis now navbar-expand-md
navbar-inverseis now navbar-dark
navbar-fixed-topis now fixed-top

navbar-toggleable-sm现在navbar-expand-md
navbar-inverse是现在navbar-dark
navbar-fixed-top是现在fixed-top