2014-02-19 57 views
0

爲什麼我不能改變Bootstrap的高度navbar,我不是navbar上的粗體,所以我將它改爲height:20px !important;,但它仍然是一樣的。Bootstrap下拉菜單:更改導航欄的高度?

任何想法如何改變navbar高度?

CSS,

.el-menu { 
    height:20px !important; 
    margin:0 !important; 
    padding:0 !important; 
    border:1px solid red; 
} 

.nav ul { 
    -webkit-border-radius:0 !important; 
    -moz-border-radius:0 !important; 
    border-radius:0 !important; 
} 


.nav, .nav li, .nav a { 
    margin:0 !important; 
    padding:0 !important; 
    border:1px solid blue; 
} 

HTML,

<!-- Fixed navbar --> 
<div class="navbar navbar-default navbar-fixed-top el-menu" role="navigation"> 

    <div class="navbar-collapse collapse"> 

     <ul class="nav navbar-nav"> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Template <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Add</a></li> 
      <li><a href="#">Manage</a></li> 
      </ul> 
     </li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">News</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Add</a></li> 
        <li><a href="#">Manage</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Blog</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Add</a></li> 
        <li><a href="#">Manage</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 

     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Setting <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Comment</a></li> 
       <li><a href="#">Design</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Logout</a></li> 
     </ul> 


    </div><!--/.nav-collapse --> 


</div> 

回答

0

您需要的CSS選擇器完全匹配。我相信設置高度的Bootstrap類是navbar,所以這是您需要在網站的CSS文件中重寫的那個。

引導CSS:

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

此致:

.navbar { 
    min-height: 0; 
    height: 20px; 
} 

注意,有可能是設置高度,你可以在Firefox,Chrome或發現使用螢火蟲/開發者模式的其他類IE,但總的原則是一樣的:用你自己的默認設置。確保在Bootstrap之後加載CSS文件,以便優先進行設置。