CSS 在 Bootstrap3 中更改导航栏高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19890700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change navbar height in Bootstrap3
提问by user2820
I'm trying to reduce the height of Bootstrap3's fixed navbar. I found the @navbar-heightvariable in variable. less, and changed it, but it doesn't seem to change anything.
I also tries these solutions: "Change navbar height", "Navbar height changing". No result.
我正在尝试降低Bootstrap3的固定导航栏的高度。我在@navbar-height变量中找到了变量。少，并改变了它，但它似乎没有改变任何东西。我还尝试这些解决方案：“更改导航栏的高度”，“导航栏高度变化”。没有结果。
Any idea?
任何的想法？
Thanks
谢谢
回答by Bass Jobsen
update
更新
As per response on https://github.com/twbs/bootstrap/issues/11443@mdo wrote:
根据https://github.com/twbs/bootstrap/issues/11443 上的回复@mdo 写道：
Change the
@navbar-heightand@navbar-padding-verticaland you should get it.
改变
@navbar-height和@navbar-padding-vertical，你应该得到它。
Example, set @navbar-height: 20px;and @navbar-padding-vertical: 0;, see: http://bootply.com/100604
示例，设置@navbar-height: 20px;和@navbar-padding-vertical: 0;，参见：http: //bootply.com/100604
Note this doesn't set the height of the .navbar-formelements
请注意，这不会设置.navbar-form元素的高度
end update
结束更新
The navbar itself has no defined width. Cause Bootstrap use the border-boxmodel, the height is set by the highest element inside it.
导航栏本身没有定义的宽度。原因 Bootstrap 使用边界框模型，高度由其中的最高元素设置。
Notice the navbar will have a min-height (set to 50px the default navbar height). @navbar-height in navbar.less sets this min-height.
请注意导航栏将有一个最小高度（设置为 50px 的默认导航栏高度）。navbar.less 中的 @navbar-height 设置了这个最小高度。
also read it's comments:
也阅读它的评论：
// Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
// 确保导航栏始终显示（例如，在折叠模式下没有 .navbar-brand）
To change the height you will have to change the heights of the inside elements.
要更改高度，您必须更改内部元素的高度。
.navbar-brand
.navbar-品牌
The .navbar-brand class got a height of 50px. Defined by a padding of 15px + a line-height of 20px;. (2 x 15 + 20 = 50).
.navbar-brand 类的高度为 50px。由 15px 的 padding + 20px 的 line-height 定义。（2 x 15 + 20 = 50）。
The line-height is set in navbar.less too by @line-height-computed.
With @line-height-computed defined in variables.less as
floor(@font-size-base * @line-height-base); // ~20px
行高也由@line-height-computed 在 navbar.less 中设置。@line-height-computed 在 variables.less 中定义为
floor(@font-size-base * @line-height-base); // ~20px
@line-height-computed will also used in forms, navigation, etc. so changing it and recompile Bootstrap will not only effect your navbar.
@line-height-computed 还将用于表单、导航等。因此更改它并重新编译 Bootstrap 不仅会影响您的导航栏。
The above make it impossible to set your navbar height with Less.
以上使得无法使用 Less 设置导航栏高度。
The padding is defined by navbar-padding-verticalbut this variables is NOT used for setting the padding of the navbar links (.navbar-nav > li > a)
填充由定义navbar-padding-vertical但此变量不用于设置导航栏链接的填充（.navbar-nav > li > a）
Use css to manipulate the line-height (so font-size) and padding of .navbar-brand to change its height and so the height of the navbar.
使用 css 来操作 .navbar-brand 的行高（所以字体大小）和填充来改变它的高度和导航栏的高度。
.navbar-nav > li > a
.navbar-nav > li > a
The .navbar-nav > li > a class, the links in your navbar also defines
a height of 50px (padding of 15 bottom/top) and a line-height of 20x
again.
Note the padding is first set to 10px hard code in navbar.less and
overwritten by ((@navbar-height - @line-height-computed) / 2)(higher precedence) for @media (min-width:
@grid-float-breakpoint)
.navbar-nav > li > 一个类，导航栏中的链接还定义了 50px 的高度（底部/顶部填充 15）和 20x 的行高。请注意，填充首先在 navbar.less 中设置为 10px 硬代码，并被((@navbar-height - @line-height-computed) / 2)（更高的优先级） 覆盖@media (min-width:
@grid-float-breakpoint)
Also in this case the line-height of the links will be set by @line-height-computed.
同样在这种情况下，链接的行高将由@line-height-computed 设置。
Other elements
其他元素
Also element like forms, dropdown will have a calculated height.
还有像表单这样的元素，下拉列表将具有计算的高度。
Overall it seems you will have to use css for the different elements of your fixed navbar to sets it's height.
总的来说，您似乎必须对固定导航栏的不同元素使用 css 来设置它的高度。
See also: https://github.com/twbs/bootstrap/issues/11443and https://github.com/twbs/bootstrap/issues/11444
另见：https: //github.com/twbs/bootstrap/issues/11443和https://github.com/twbs/bootstrap/issues/11444
回答by user2982173
.navbar {
padding: 0;
transition: background 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;
}
.navbar-brand {
float: left;
font-size: 18px;
height: 10px;
line-height: 2px;
padding: 2px;
}
It should override scrolling-nav.css
它应该覆盖 scrolling-nav.css
