在 Bootstrap3 中更改导航栏高度



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

知道吗?

谢谢

更新

根据 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 使用边框框模型,高度由其内部的最高元素设置。

请注意,导航栏将具有最小高度(默认设置为 50px)导航栏高度)。导航栏中的@navbar高度设置此最小高度。

另请阅读它的评论:

确保导航栏始终显示(例如,在折叠模式下没有 .navbar 品牌)

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

.导航栏品牌

.navbar品牌类的高度为50px。由填充15px + 行高为 20px;。(2 x 15 + 20 = 50)。

行高在导航栏中设置,也通过@line高度计算。在变量中定义了@line高度计算。 floor(@font-size-base * @line-height-base); // ~20px

@line高度计算也将用于表单、导航等。更改它并重新编译 Bootstrap 不仅会影响您的导航栏。

以上情况使得无法使用 Less 设置导航栏高度。

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

使用 css 操作行高(即字体大小)和填充.navbar-brand来更改其高度,因此更改导航栏的高度。

.navbar-nav> li> a

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

同样在这种情况下,链接的行高将由@line高度计算。

其他元素

同样像表单这样的元素,下拉列表将具有计算的高度。

总的来说,您似乎必须对不同的元素使用 css的固定导航栏来设置其高度。

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

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

它应该覆盖滚动导航.css

最新更新