css – 在Bootstrap3中更改导航栏高度

前端之家收集整理的这篇文章主要介绍了css – 在Bootstrap3中更改导航栏高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试降低Bootstrap3的固定导航栏的高度.我在变量中找到了@ navbar-height变量.更少,并改变它,但它似乎没有改变任何东西.
我也尝试了这些解决方案:“ Change navbar height”,“ Navbar height changing”.没有结果.

任何想法?

谢谢

解决方法

更新

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

Change the @navbar-height and @navbar-padding-vertical and you
should get it.

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

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

结束更新

导航栏本身没有定义的宽度.原因Bootstrap使用border-box型号,高度由其内部的最高元素设置.

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

还看了它的评论

// Ensure a navbar always shows (e.g.,without a .navbar-brand in collapsed mode)

要改变高度,你必须改变内部的高度
元素.

.navbar品牌

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

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

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

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

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

使用css来操纵行高(so font-size)和填充
.navbar-brand来改变它的高度,以及导航栏的高度.

.navbar-nav> li>一个

.navbar-nav> li>一个类,导航栏中的链接也定义了
高度为50px(15个底部/顶部的填充)和20x的行高
再次.
请注意,填充首先设置为navbar.less和10px硬编码
用@media覆盖((@ navbar-height – @ line-height-computed)/ 2)(更高的优先级)(min-width:
@网格浮子断点)

同样在这种情况下,链接的行高将设置为
@行高计算.

其他要素

此外,元素如表单,下拉列表将具有计算的高度.

总的来说,似乎你必须使用css来表示不同的元素
你的固定导航栏设置它的高度.

另见:https://github.com/twbs/bootstrap/issues/11443https://github.com/twbs/bootstrap/issues/11444

猜你在找的CSS相关文章