<分区>
标签 html css bootstrap-4
<分区>
我有点难以将我网站的导航栏(包括品牌和链接)居中，因为我更像是后端而不是前端。
代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>我想要什么
我知道我可以使用 m-auto 将链接居中，但是品牌(有一个图像作为 Logo )会留在左边，我似乎不知道如何以链接为中心(以一种良好/干净的方式)。
谢谢。
引用为重复的链接都没有帮助我。我需要品牌标志和中心的链接，ZimSystem 提供的链接只做一个而没有另一个。
最佳答案
.brand-wrapper{
width:100%;
}
.navbar-toggler{
float:left;
}
@media(max-width: 767px){
.navbar-brand{
left:50%;
position:absolute;
transform: translate(-50%);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="brand-wrapper">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-center" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-center" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>关于html - 将 bootstrap 4 导航栏居中(包括品牌和链接)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51349088/