19

到目前为止,这是我的 CSS/LESS CSS 代码:

//make navbar taller
@navbarHeight: 60px;

//make navbar link text 18px
.navbar-inner {
    font-size: 18px;
}

//make navbar brand text 36px
.navbar .brand {
    font-size: 36px;
}

产生这个:

在此处输入图像描述

仅供参考,我正在使用 Twitter Bootstrap 演示代码,我没有更改 html(除了更改品牌名称)。

正如您所看到的,品牌名称在导航栏中垂直居中,就像它应该的那样,但导航链接不是(它们向顶部高一点)。只有在我更改导航栏的高度后,问题才变得明显。我怎样才能让它们垂直居中(例如这个网站)?

如果有任何帮助,突出显示 Chrome 中的元素会显示:

在此处输入图像描述

4

4 回答 4

7

该类.brand使用不同于line-height整个 Bootstrap 使用的基本文本,以及其他一些关键差异。

来自原始引导导航栏的相关部分 LESS -

对于.brand

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

对于导航栏中的链接:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

您可能需要使用 , 的值@elementHeightline-height并且可能padding需要.navbar .nav > li > a选择器来反映更大的 60px @navbarHeight(这些默认值适用于 40px @navbarHeight)。也许尝试 40px@elementHeight和/或 29px 行高开始。

于 2012-07-11T00:43:58.870 回答
0

如果上面的答案没有帮助,而且你还没有接触过 html,那么我唯一能想到的就是 css。您可能想查看引导示例使用的 css 并相应地修改其.navbar-inner大小.navbar .brand

于 2012-07-10T10:25:09.740 回答
0

我刚刚在 Bootstrap 3 上遇到了类似的问题,但在品牌元素方面。最后我使用了以下css:

.navbar-brand {
  font-size: 3em;
  line-height: 1em;
}

由于 50 像素的图像,我的导航栏的大小增加了,顶部和底部边距为 10 像素。不确定这是否有帮助。

于 2014-02-18T01:52:41.747 回答
0

你可以试试这个:

display: table-cell;

于 2012-07-10T08:27:11.543 回答