我有一个导航栏,中间有一个标志,两边都有链接。如何防止徽标向下推(添加边距/填充)?基本上......导航栏背景高度不应该扩大。我希望徽标位于顶部并重叠。
如果我要使徽标定位绝对可以解决问题,但我只需要在容器本身内部进行。不知道该怎么做。目前我只使用带有img标签的li标签。这样就没有笨拙的变通方法。正如您可能已经看到的那样,我正在使用 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">
正如我从你的图片中了解到的
只是定义2 UL每个右和左和图像中间
样式.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;
}
在这里你可以在小提琴上检查它
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句