在Bootstrap3中更改导航栏高度

Question

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

任何的想法？

谢谢

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设置此最小高度.

还阅读了它的评论:

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

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

.navbar品牌

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

通过@ line-height-computed在navbar.less中设置行高.使用@ line-height-computed在variables.less中定义 floor(@font-size-base * @line-height-base); // ~20px

@ line-height-computed也将用于表单,导航等.因此更改它并重新编译Bootstrap不仅会影响导航栏.

以上使得无法使用Less设置导航栏高度.

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

使用css来操纵.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