我正在尝试降低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