Question

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

有什么想法吗？

由于

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-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＆gt; li＆gt; a）

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

.navbar-nav＆gt; li>一个

.navbar-nav＆gt; li>一个类，导航栏中的链接也定义了高度为50px（15个底部/顶部的填充）和20x的线高再次。请注意，填充首先设置为navbar.less中的10px硬编码由((@navbar-height - @line-height-computed) / 2)

的

@media (min-width: 
@grid-float-breakpoint)

（更高优先级）覆盖

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

其他元素

同样的形式元素，下拉列表将具有计算的高度。

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

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

Answer 2

.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

在Bootstrap 3中更改导航栏高度

2 个答案:

.navbar品牌

.navbar-nav＆gt; li>一个

其他元素