Question

我试图降低Bootstrap 3.1.1的导航栏的高度，而不使用它的较少版本。我通过在不同的网站上阅读来尝试了几种方法，并且没有一种方法可以降低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类，或者我是否需要调用其中两个我已尝试获得所需效果的类？

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

减少高度bootstrap导航栏大小而不使用更少？

1 个答案: