【发布时间】：2019-12-06 22:49:26
【问题描述】：
我尝试使用引导程序制作一个合适的导航栏。
我试着在中间做一个标志，其余的在左边和右边。 当前的解决方案是不干净的，我问你一个建议，如何解决它。
问题：从徽标到左/右对象的长度不同，并且徽标不完美居中。 [导航栏][1]
当前html：
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">Status</a></li>
<li class="nav-item"><a href="#" class="nav-link">Download</a></li>
<li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
<li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li>
</ul>
<a class="navbar-brand" href="#">
<img src="/img/helmet.png" height="100" with="50" alt="">
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li>
<li class="nav-item"><a href="/places/" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="#" class="nav-link">Plex</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS
.collapse.navbar-collapse ul{
margin: auto;
}
.navbar-brand {
position: absolute;
top: 0;
left: 50%;
text-align: center;
margin: auto;
font-size: 36px;
}
.bg-dark {
background:transparent !important;
background-image: url("/img/navbar.png") !important;
min-height: 70px;
}
【问题讨论】：
-
可能的原因可能是使用了 mr-auto。尝试使用 mr-30px 为左
- 和 ml-30px 为右
- 标签设置两侧的固定边距。您还应该检查图像本身是否填充了额外的空间，在这种情况下应该裁剪图像。
-
徽标相对于下面的内容窗格居中（我测量过），因此容器上的边距可能已关闭
-
一个建议，您可以在 SO 中发布您的 css 或任何代码，只要它被正确格式化为代码。所有代码内容前面必须有 4 个字母空格才能作为代码。
标签： php bootstrap-4 navbar