这是我的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(除了改变品牌名称)。
您可以看到，品牌名称在导航栏内垂直居中，就像它应该是一样，但导航链接不是(它们比顶端更高)。一旦我改变了导航栏的高度，这个问题就变得很明显。如何让他们垂直居中(例如this网站)？
如果有任何帮助，请在Chrome中突出显示元素：
解决方法
.brand类使用与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;
- }
您可能需要使用@elementHeight，line-height的值，并可能需要播放.navbar .nav>的填充值。 li>一个选择器来反映较大的60px @navbarHeight(这些默认值适用于40px @navbarHeight)。也许尝试一个40px @elementHeight和/或29px的行高开始。
