降低折叠bootstrap导航栏的高度

Question

请问有什么方法可以降低导航栏的高度吗？ http://www.bootply.com/render/1dopQbJEMd。我在 link.I 中使用完全相同的 css 属性，尝试在 css 中使用高度属性。但它并没有减少。

Answer 1

看看这个 link： http://getbootstrap.com/customize/#navbar

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

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

Answer 2

检查该代码后，我看到

.navbar 有 min-height:50px ，将其更改为 min-height:0 这样它将从其内容
[= 中继承 height 48=]
.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 矮

降低折叠bootstrap导航栏的高度

Reducing the height of the collapse bootstrap navigation bar

css

height

twitter-bootstrap-3