Bootstrap导航栏固定顶部高度

Question

如何为包含CSS代码的Bootstrap 40px设置自定义高度（例如50px而不是navbar-fixed-top）

我试过了：

.navbar {
   height: 40px;
   min-height: 40px;
}

但是文本元素不是navbar中的垂直居中。

Jsfiddle：http://jsfiddle.net/xg8swcwc/embedded/result/

注意：This问题的答案是http://getbootstrap.com/customize/，需要使用LESS重新编译CSS，这不是这里要求的。

Answer 1

如果我理解您的问题，并且您无法更改导航栏的默认高度，则需要更改导航栏中包含的链接的填充。

 .navbar-nav > li > a{ padding: 0px 15px }

导航栏品牌的'line-height'为20px。因此，如果您希望垂直居中，则需要将此值的一半赋予padding-top。

所以：

.navbar-brand{ padding-top: 10px; }

Answer 2

增加或减少菜单项顶部和底部填充将改变导航栏的高度

 .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
 .navbar-brand { padding: 10px 15px; } 

根据徽标的高度，您可以为.navbar-brand类

添加单独的填充

Answer 3

您需要适当地设置填充。

这是我在学习LESS之前为我所做的网站做的事情：

@media (min-width: 991px) {
    .navbar-nav > li > a, .navbar-brand {
        margin-top: 30px;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 20px;
    }
}

您可能也想使用margin-bottom，并且可能想要更改值，但您明白了。