如何增加Bootstrap 3 Navbar高度，同时在折叠时保持菜单高度较小 [英] How to increase Bootstrap 3 Navbar height while keeping menu height small when collapsed

问题描述

我无法在已发布的问题中找到答案。

I was not able to find an answer in the already posted questions.

我试图将顶部固定的Bootstrap 3导航栏的高度增加到80像素，但是当菜单折叠（即屏幕宽度小于768像素）时，要将原始最小高度保持为50像素。

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).

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>

我使用以下CSS并成功更改导航栏高度，但折叠的菜单高度仍然为80px：

I am using the following CSS and succesfully changed the navbar height, but the collapsed menu height is still at 80px:

.navbar-fixed-top {
min-height: 80px;
}

@media (min-width: 768px) {
.navbar {
border-radius: 4px;
min-height: 50px;
 }
}

感谢您的建议。

推荐答案

我终于开发了一个解决方案。您必须创建一个媒体查询，将折叠菜单的行高保持在20像素，屏幕宽度最大为767像素。我的style.css中的以下CSS覆盖了boostrap.css并解决了我的问题：

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:

.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;}
}

这篇关于如何增加Bootstrap 3 Navbar高度，同时在折叠时保持菜单高度较小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！