CSS 如何增加 Bootstrap 3 导航栏高度，同时在折叠时保持菜单高度较小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20553572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase Bootstrap 3 Navbar height while keeping menu height small when collapsed
提问by
I am trying to increase the height of a top-fixed Bootstrap 3 navbar to 80px, but want to keep the original min-height at 50px, when the menu is collapsing (i.e. screen widths of less than 768px).
我试图将顶部固定的 Bootstrap 3 导航栏的高度增加到 80 像素，但希望在菜单折叠时（即屏幕宽度小于 768 像素）将原始最小高度保持在 50 像素。
HTML:
HTML：
<!-- Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<a class="navbar-brand" href="#">Project</a>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Project</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Services</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Support</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Navigation Bar End -->
</div>
I am using the following CSS and succesfully changed the navbar height, but the collapsed menu height is still at 80px:
我正在使用以下 CSS 并成功更改导航栏高度，但折叠菜单高度仍为 80px：
.navbar-fixed-top {
min-height: 80px;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
min-height: 50px;
}
}
回答by
I finally developed a solution myself. You have to create a media query that keeps the line height of the collapsing menu at 20px for screen widths up to 767px. The following CSS in my style.css overrides the boostrap.css and solved my problem:
我终于自己开发了一个解决方案。您必须创建一个媒体查询，将折叠菜单的行高保持在 20 像素，屏幕宽度最大为 767 像素。我的 style.css 中的以下 CSS 覆盖了 boostrap.css 并解决了我的问题：
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;}
}
回答by Derek
Your logic is backwards. Right now it'll only apply that 50px height for pages WIDER than 768px. This should fix it:
你的逻辑是反的。现在，它只会为比 768 像素更宽的页面应用 50 像素的高度。这应该解决它：
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 80px;
}
@media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
