Bootstrap 4 导航栏，左侧有品牌，左侧、右侧和中间有链接答案

【问题标题】：Bootstrap 4 navbar with brand on left and links on left, right and centerBootstrap 4 导航栏，左侧有品牌，左侧、右侧和中间有链接
【发布时间】：2020-12-13 17:51:49
【问题描述】：

我正在尝试在 Bootstrap 中创建一个导航栏，其中品牌位于左侧，链接位于左侧、中间和右侧。但是，已回答的 Bootstrap 导航栏对齐 question 中的 examples 似乎都没有做我想要完成的事情。

这是我正在尝试创建的导航栏的示例：

我尝试将mx-auto 应用到中心链接，但这并不能正确地将链接置于视口的中心。在中心链接上使用 position: absolute 和 transform: translateX(-50%) 似乎是一个 hacky 解决方案，如果有可用的 flexbox 解决方案，则不应使用（特别是如果您使用的是旧版本的 Chrome，其中转换文本会使文本变得模糊）。

这是我目前的代码（它直接从之前链接示例的示例 3 中复制而来）。我想在品牌之后向左侧添加链接，同时仍然能够折叠导航栏中的所有内容。

    <nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Navbar 3</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
        <ul class="navbar-nav w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

如何将链接添加到品牌之后的左侧，同时将示例中的其他链接保持在中间和右侧的正确位置？

【问题讨论】：

标签： css bootstrap-4 flexbox

【解决方案1】：

试试这个代码，它会工作的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
    
    <nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
        <a href="/" class="navbar-brand d-flex d-md-none mr-auto">Navbar 3</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
            <ul class="navbar-nav w-100 justify-content-left">
                <a href="/" class="navbar-brand d-none d-md-block">Navbar 3</a>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="//codeply.com">Codeply</a>
                </li>
            </ul>
            <ul class="navbar-nav w-100 justify-content-center">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="//codeply.com">Codeply</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="#">Right</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Right</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Right</a>
                </li>
            </ul>
        </div>
    </nav>

</body>
</html>

【讨论】：

这似乎不起作用。应该在视口中心的链接被品牌抵消了。见：imgur.com/pACdrTJ