在 Bootstrap3 中更改导航栏高度

Question

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

有什么想法吗？

谢谢

Answer 1

更新

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

更改@navbar-height 和@navbar-padding-vertical 和你 应该得到它。

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

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

结束更新

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

注意导航栏会有一个最小高度（默认设置为 50px 导航栏高度）。 navbar.less 中的@navbar-height 设置此最小高度。

还阅读了它的 cmets：

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

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

.navbar-品牌

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

@line-height-computed 也可以在 navbar.less 中设置行高。 在 variables.less 中定义 @line-height-computed 为 floor(@font-size-base * @line-height-base); // ~20px

@line-height-computed 也将用于表单、导航等，所以 更改它并重新编译 Bootstrap 不仅会影响您的导航栏。

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

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

使用 css 来控制 line-height (so font-size) 和 padding .navbar-brand 来改变它的高度和导航栏的高度。

.navbar-nav > li > a

.navbar-nav > li > 一个类，你的导航栏中的链接也定义了 50px 的高度（底部/顶部 15 的填充）和 20x 的行高 再次。 请注意，填充首先在 navbar.less 中设置为 10px 硬代码，并且 被((@navbar-height - @line-height-computed) / 2)（更高优先级）覆盖为@media (min-width: @grid-float-breakpoint)

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

其他元素

还有类似于表单的元素，下拉菜单会有一个计算好的高度。

总体而言，您似乎必须对不同的元素使用 css 你的固定导航栏设置它的高度。

另请参阅：https://github.com/twbs/bootstrap/issues/11443 和 https://github.com/twbs/bootstrap/issues/11444

Answer 2

.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;
}

它应该覆盖 scrolling-nav.css