在Bootstrap 4中，是否可以将导航栏品牌居中并在品牌左侧对齐一些文本？

在Bootstrap 4中，navbar使用flexbox。它有助于居中名称或您需要居中的任何名称的居中。因此可以使用mx-auto将其居中。然后，左右菜单将不需要浮点数。

 <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Hair products</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">VIRTUAL BEAUTY</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
            </li>
        </ul>
    </div> </nav>

这将为您提供一个导航栏，如下图所示。

参考图片来自：在Bootstrap 4导航栏中将元素居中

在这里，您可以看到实际的视口中心与品牌名称所在的中心不同。那是因为它在导航栏的左端和右端分别居中。

以下代码可用于克服此问题。通过使用绝对位置。

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }

希望这可以帮助。

通过此链接可以清楚地说明完成工作的方式。MX-汽车到中心navbar- https://www.codeply.com/go/J9rL11Tf7h导航栏中心和绝对位置- https://www.codeply.com/go/BC2gFdZ9fb