Bootstrap navbar-fixed-top 高度答案

【问题标题】：Bootstrap navbar-fixed-top heightBootstrap navbar-fixed-top 高度
【发布时间】：2014-09-22 20:36:48
【问题描述】：

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

我试过了：

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

但随后文本元素不在navbar 中垂直居中。

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

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

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

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

您的导航栏品牌的“行高”是20px。所以，如果你想垂直居中，你需要把这个值的一半给padding-top。

所以：

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

【讨论】：

它适用于我 .navbar-nav > li > a{ padding: 10px 10px } 除了 navbar-brand 仍然不是垂直居中...我尝试#navbar-brand { padding: 10px 10px } 不成功...
请分享一个小提琴以更好地理解您的问题
谢谢@cor，但这就是你得到的答案：jsfiddle.net/xg8swcwc/1/embedded/result 链接没有居中。您能否用您的答案更新 jsfiddle，以便更容易查看它是否有效。

【解决方案2】：

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

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

根据徽标的高度，您可以为.navbar-brand 类添加单独的填充

【讨论】：

你给了我同样的答案
@Feroza，如果您尝试使用 JSfiddle jsfiddle.net/xg8swcwc/embedded/result，它不起作用。没有.brand 元素，直接编辑#navbar-brand 的填充不起作用......也许它被其他东西覆盖了？
执行以下操作：.navbar-nav>li>a { padding-top: 10px;底部填充：10px； } .navbar-brand { 填充：10px 15px; }

【解决方案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，并且可能想更改值，但您明白了。

【讨论】：

不适用于品牌等，请参阅 JSfiddle ：jsfiddle.net/xg8swcwc/embedded/result
是的@Basj 我不需要更改之前网站中的品牌名称。无论如何，请检查更新并让我知道它是否有效。我也添加了.navbar-brand，它对我有用。