Bootstrap Navbar 品牌在左侧，链接居中

Question

我遵循了具有左侧品牌和中心链接的代码：

.flex-fill {
   flex:1;   
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <span class="navbar-brand d-flex flex-fill">Brand</span>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="navbar-nav justify-content-center d-flex flex-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex flex-fill"><!--spacer--> </div>
</nav>


<div class="container-fluid">
    <h5 class="text-center">--center--</h5>
</div>

当我尝试将品牌向右推一点时，链接也移到了剩余 space 的中心。

有没有一种方法可以将品牌进一步向右移动，并且仍然使链接居中于 window 的整个宽度而不是剩余的 space在品牌的右边？

Answer 1

通过将 position: absolute 应用于 "Brand" span 以便您可以独立于菜单移动它，同时删除无用的 div 间隔符和 d-flex classes 因为 navbar class 已经默认使用 display : flex，我已经将 margin-left 的 3rem 应用到 "Brand" span 在 bootstrap 的 ml-5 class helper 的帮助下仅用于演示目的（您可以在方便时设置自己的保证金）。

代码如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.flex-fill {
   flex:1;   
}
</style>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <span class="navbar-brand position-absolute ml-5">Brand</span>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="navbar-nav justify-content-center flex-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>


<div class="container-fluid">
    <h5 class="text-center">--center--</h5>
</div>

Bootstrap Navbar 品牌在左侧，链接居中

Boostrap Navbar brand on left and links centered

css

centering

navbar

twitter-bootstrap