我想将Bootstrap Navbar中的Brand与其他链接垂直对齐,以便每个元素的底部垂直对齐。
当前对齐方式是居中对齐或仅未对齐。 HTML类似于:
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="/" class="navbar-brand">Brand</a>
<li><a href='#' class="nav navbar-nav">Link1</a>
<li><a href='#' class="nav navbar-nav">Link2</a>
</ul>
我看到的是Link1和Link2的底部略高于Brand的底部。基于另一个问题,我尝试过这样的事情。
.navbar .nav > li > a {
padding-top: 20px;
line-height: 10px;
vertical-align: bottom;
}
这没有帮助。即使我增加了线路高度,一切都被取代了,包括品牌。
我只是希望这些元素的底部是对齐的,就像它们都坐在架子上一样。
答案 0 :(得分:2)
设置负margin-top
值。在你的情况下,-1.1px
似乎很完美。
.navbar-inverse .navbar-brand {
margin-top: -1.1px;
}
<强>输出:强>