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

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

有没有办法让我可以将品牌进一步向右移动，并且仍然将链接集中在窗口的整个宽度上，而不是品牌右侧的剩余空间？

Answer 1

通过将position: absolute应用于“Brand” span这样你就可以独立于菜单移动它，同时删除无用的div spacer和d-flex类，因为navbar类已经使用了display : flex默认情况下，我已应用了在用于演示目的的bootstrap的ml-5 级助手的帮助下，3rem左边的“品牌” span （您可以在方便时设置自己的边距）。

代码如下：

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