<分区>
标签 html css bootstrap-4 navbar
<分区>
我有一个导航栏，中间有一个 Logo ，两边都有链接。如何防止 Logo 下推(添加边距/填充)？基本上...导航栏背景高度不应扩大。我希望 Logo 位于顶部并重叠。
如果我要使 Logo 绝对定位可能会解决问题，但我需要它只发生在容器本身内。不知道该怎么做。目前我只使用 li 标签，里面有一个 img 标签。这样就没有 hacky 解决方法。正如您可能已经看到的那样，我正在使用 Bootstrap 4。
<nav class="navbar fixed-top navbar-expand-md justify-content-between">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse">Link</a>
</li>
<li class="nav-item">
<img src="img/logo-placeholder.png" id="logo"></img>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse">Link</a>
</li>
</ul>
</div>
</nav>
最佳答案
你可以给 .navbar-nav align-items: center; 然后它会在中间
加上你的 img 不应该有结束标签改变它从
<img src="img/logo-placeholder.png" id="logo"></img>
到
<img src="img/logo-placeholder.png" id="logo">
据我了解您的image
只需在右和左定义2个ul和中间的image
为 .navbar-nav 设置以下样式
width: 100%;
background-color: #eee;
然后你可以用 ul 把它们放在
.right {
justify-content: flex-start;
}
.left {
justify-content: flex-end;
}
.navbar-nav {
align-items: center;
width: 100%;
background-color: #eee;
}
.right {
justify-content: flex-start;
}
.left {
justify-content: flex-end;
}
在这里你可以查看 fiddle
关于html - 中间带有 Logo 的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50528931/