Bootstrap Navbar将Brand与其他链接垂直对齐

时间:2015-06-16 02:48:47

标签: html css twitter-bootstrap

我想将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;
}

这没有帮助。即使我增加了线路高度,一切都被取代了,包括品牌。

我只是希望这些元素的底部是对齐的,就像它们都坐在架子上一样。

1 个答案:

答案 0 :(得分:2)

设置负margin-top值。在你的情况下,-1.1px似乎很完美。

.navbar-inverse .navbar-brand {
  margin-top: -1.1px;
}

<强>输出:

Navbar Alignment