在不使用更少的情况下减小高度引导导航栏的大小？答案

【问题标题】：Decreasing the height bootstrap navbar size without using less?在不使用更少的情况下减小高度引导导航栏的大小？
【发布时间】：2014-05-03 01:53:37
【问题描述】：

我正在尝试降低 Bootstrap 3.1.1 导航栏的高度，而不使用它的 less 版本。我通过在不同的网站上阅读来尝试了几种方法，但它们都没有降低 CSS 的 .navbar 高度。

我已经设法修复了.navbar-nav > li > a 上的填充。

我的 HTML：

   <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
     <div class="container">
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="/">QuadCMS</a>
        </div>
        <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav">
              <li class="active"><a href="/">Home</a></li>
              <li><a href="/support/">Help</a></li>
            </ul>
         </div>
      </div>
   </div>

我的 CSS 会覆盖 Bootstrap 以尝试修复导航栏。

.navbar {
   height: 25px !important;
   }

.navbar-nav > li > a { 
   padding-top: 5px !important;
   padding-bottom: 5px !important;
   }

我的主要问题是导航栏的实际高度，而不是现在的填充。导航链接的填充是固定的并且在小尺寸下工作。我还尝试将.navbar 更改为.navbar-nav 和.navbar-fixed-top，但没有任何效果。

我是否需要调用与我尝试过的不同的 CSS 类，还是需要调用两个我已经尝试过的 CSS 类以获得所需的效果？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是默认的.navbar 样式：

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

您需要覆盖min-height 属性。您可以使用值inherit。

Example Here

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

【讨论】：