Question

有没有办法降低导航栏的高度？ http://www.bootply.com/render/1dopQbJEMd。我在链接中使用完全相同的css属性。我尝试使用css中的height属性。但它没有减少。

Answer 1

看一下这个链接： http://getbootstrap.com/customize/#navbar

在那里你可以看到你可以改变的变量。其中之一是导航栏的高度。更改该变量并下载页面底部的CSS和JS文件。使用新文件而不是默认的Bootstrap文件。

您也可以尝试更改CSS，但我发现它更难。

Answer 2

检查完该代码后，我看到了

.navbar已min-height:50px，将其更改为min-height:0，以便从其内容继承height
.navbar-brand有padding:15px 15px，减少了top和bottom填充的方式，例如padding:5px 15px
.navbar-nav>li>a已将padding-top:15px;padding-bottom:15px缩减为5px，就像您在第2点所做的那样
.navbar-text有margin-top:15px;margin-bottom:15px，正如您在第2点和第3点所做的那样将其缩小为5px

最后你将拥有CSS：

.navbar {
   min-height:0;
}
 .navbar-brand {
   padding:5px 15px;
}
.navbar-nav>li>a {
   padding-top:5px;
   padding-bottom:5px;
}
.navbar-text {
   margin-top:5px;
   margin-bottom:5px;
}

.navbar的高度为30px，20px的高度低于之前

降低折叠引导程序导航栏的高度

2 个答案: