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>

当我尝试将品牌进一步推向右侧时，链接也会移动到剩余空间的中心。

有没有一种方法可以使品牌进一步向右移动，并使链接仍然位于窗口的整个宽度的中心，而不是品牌右侧的剩余空间？ < / p>

Answer 1

通过将position: absolute应用于“品牌” span，因此您可以从菜单中独立移动它，还可以删除无用的div分隔符和d-flex类，因为navbar类已经默认使用了display : flex，我借助bootstrap的span {{3}将3rem的左边距应用到了“品牌” ml-5 }仅用于演示目的（您可以在方便时设置自己的边距）。

下面的代码：

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

左侧的Boostrap Navbar品牌，链接居中

1 个答案: