在 Bootstrap3 中更改导航栏高度 [英] Change navbar height in Bootstrap3

问题描述

我正在尝试降低 Bootstrap3 的固定导航栏的高度.我在变量中找到了 @navbar-height 变量.少，并改变了它，但它似乎没有改变任何东西.我也尝试了这些解决方案:更改导航栏高度"、导航栏高度变化".没有结果.

I'm trying to reduce the height of Bootstrap3's fixed navbar. I found the @navbar-height variable 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.

有什么想法吗?

谢谢

推荐答案

更新

根据对 https://github.com/twbs/bootstrap/issues/11443 的回复 @mdo 写道:

As per response on https://github.com/twbs/bootstrap/issues/11443 @mdo wrote:

改变 @navbar-height 和 @navbar-padding-vertical 和你应该明白了.

Change the @navbar-height and @navbar-padding-vertical and you should get it.

示例，设置@navbar-height:20px;和@navbar-padding-vertical:0;，见:http://bootply.com/100604

注意这不会设置 .navbar-form 元素的高度

Note this doesn't set the height of the .navbar-form elements

结束更新

导航栏本身没有定义的宽度.原因 Bootstrap 使用 border-box 模型，高度由其中的最高元素设置.

The navbar itself has no defined width. Cause Bootstrap use the border-box model, the height is set by the highest element inside it.

注意导航栏将有一个最小高度(默认设置为 50px导航栏高度).navbar.less 中的 @navbar-height 设置了这个最小高度.

Notice the navbar will have a min-height (set to 50px the default navbar height). @navbar-height in navbar.less sets this min-height.

还阅读它的评论:

//确保导航栏始终显示(例如，在折叠模式下没有 .navbar-brand)

// Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)

要改变高度，你必须改变内部的高度元素.

To change the height you will have to change the heights of the inside elements.

.navbar-brand 类的高度为 50 像素.由填充定义15px + 20px 行高；(2 x 15 + 20 = 50).

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.less 中由@line-height-computed 设置.@line-height-computed 在 variables.less 中定义为floor(@font-size-base * @line-height-base);//~20px

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 也会用在表单、导航等中，所以更改它并重新编译 Bootstrap 不仅会影响您的导航栏.

@line-height-computed will also used in forms, navigation, etc. so changing it and recompile Bootstrap will not only effect your navbar.

以上内容使您无法使用 Less 设置导航栏高度.

The above make it impossible to set your navbar height with Less.

填充由 navbar-padding-vertical 定义，但此变量不用于设置导航栏链接的填充 (.navbar-nav > li > a)

The padding is defined by navbar-padding-vertical but this variables is NOT used for setting the padding of the navbar links (.navbar-nav > li > a)

使用css来操作行高(所以字体大小)和填充.navbar-brand 更改其高度以及导航栏的高度.

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.

.navbar-nav > li > 一个类，你的导航栏中的链接也定义了高度为 50px(底部/顶部填充 15)和行高 20x再次.请注意，在 navbar.less 和被 ((@navbar-height - @line-height-computed)/2)(更高优先级)覆盖，用于 @media(最小宽度:@grid-float-breakpoint)

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)

同样在这种情况下，链接的行高将由@line-height-computed.

Also in this case the line-height of the links will be set by @line-height-computed.

还有像表单一样的元素，下拉菜单将有一个计算的高度.

Also element like forms, dropdown will have a calculated height.

总的来说，您似乎必须为不同的元素使用 css固定导航栏的设置它的高度.

Overall it seems you will have to use css for the different elements of your fixed navbar to sets it's height.

另见:https://github.com/twbs/bootstrap/issues/11443 和 https://github.com/twbs/bootstrap/issues/11444

这篇关于在 Bootstrap3 中更改导航栏高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！