8

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

任何想法？

谢谢

4

2 回答 2

21

更新

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

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

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

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

结束更新

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

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

还阅读了它的评论：

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

要更改高度，您必须更改内部元素的高度。

.navbar-品牌

.navbar-brand 类的高度为 50px。由 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 来操作 .navbar-brand 的 line-height (so font-size) 和 padding 来改变它的高度和导航栏的高度。

.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

于 2013-11-10T21:38:13.753 回答
1 
.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

于 2015-07-30T07:52:52.193 回答