Question

我是bootstrap框架的新手。

Logo增加NavBar的高度：

在我的导航栏中，我插入了一个高度为50像素的徽标。这显然使导航栏更高。我没有为此调整任何CSS，它只是强制增加高度的徽标。

问题：

导航栏中的链接与现在较高的导航栏顶部对齐。

目标：

我希望链接在导航栏中垂直居中，因为它看起来会更好。

我的假设是使用行高值或填充。然而，这引入了仍然在移动浏览器上生效的问题（当它切换到切换菜单时），所以我的扩展菜单结果太高，看起来很傻。

非常感谢任何见解？

我的CSS是使用最新版本3.0.2下载的默认引导程序CSS。

这是我的HTML：

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

当我真的希望它们在中心垂直对齐时，正是那些与顶部对齐的“链接1”，“链接2”，“链接3”和“链接4”链接。

Answer 1

将其添加到样式表中。 line-height应与徽标的高度匹配

.navbar-nav li a {
 line-height: 50px;
}

查看小提琴：http://jsfiddle.net/nD4tW/

Answer 2

马特的答案很好，但为了避免这种情况传播到导航栏内的其他元素（比如当你还有一个下拉列表时），请使用

.navbar-nav > li > a {
   line-height: 50px;
}

Answer 3

使用Bootstrap Customizer生成具有较高导航栏的Bootstrap版本。您要更改的值为Navbar section中的@navbar-height。

检查您当前的实施情况，了解导航栏与50px品牌形象的高度，并在定制器中使用该计算出的高度。

Answer 4

Bootstrap将导航栏的高度自动设置为50px。链接上方和下方的填充设置为15px。我认为bootstrap正在为你的徽标添加填充。

您可以删除徽标上方和下方的部分填充，也可以在链接的上方和下方添加更多填充。

添加更多填充应如下所示：

nav.navbar-inverse>li>a {
 padding-top: 25px;
 padding-bottom: 25px;
}

Answer 5

我发现你不一定需要垂直居中的文字，它在行的底部附近看起来也很好，只有当它位于顶部（或高于中心？）它看起来不对劲。所以我用这个把链接推到了行的底部：

.navbar-brand {
    min-height: 80px;
}

@media (min-width: 768px) {
    #navbar-collapse {
        position: absolute;
        bottom: 0px;
        left: 250px;
    }
}

我的品牌形象是SVG，我使用了height: 50px; width: auto，这使它大约216px宽。它从容器中垂直溢出，所以我添加min-height: 80px;为它腾出空间加上bootstrap的15px边距。然后我调整了navbar-collapse的{{1}}设置，直到它看起来正确。

Answer 6

我实际上最终得到了类似的东西以允许导航栏崩溃。

@media (min-width: 768px) { //set this to wherever the navbar collapse executes
  .navbar-nav > li > a{
    line-height: 7em; //set this height to the height of the logo.
  }
}

Bootstrap 3：当Logo增加Navbar的高度时，垂直中心导航链接

6 个答案: