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

【问题标题】：Bootstrap Navbar vertically align Brand with other linksBootstrap Navbar 将 Brand 与其他链接垂直对齐
【发布时间】：2015-06-16 11:19:11
【问题描述】：

我想将 Bootstrap 导航栏中的品牌与其他链接垂直对齐，这样 每个元素的底部都垂直对齐。

当前对齐方式要么居中对齐，要么只是未对齐。 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;
}

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

我只想让这些元素的底部对齐，就像它们都坐在架子上一样。

【问题讨论】：

把问题从“Bootstap”改成“Bootstrap”呵呵呵呵。

标签： html css twitter-bootstrap

【解决方案1】：

设置一个负的margin-top 值。在您的情况下，-1.1px 似乎很完美。

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

输出：

【讨论】：