Bootstrap活動菜單更改導航欄高度

Question

我在活動菜單（引導程序）中添加了一個2px的border-bottom。但正因爲如此，我的導航欄會自動調整大小。例如：我的導航欄高度爲70px，在添加2px border-bottom後，我的導航欄調整爲72px。我想知道如何阻止。我嘗試了最小/最大高度，但它不起作用。

<div class="collapse navbar-collapse navbar-right" id="nbar-collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a class="active-page" href="#">Home</a></li> 

     <li><a href="#">Host2</a></li> 

     <li><a href="#">Host3</a></li> 
    </ul> 
</div> 


.active-page 
{ 
    border-bottom: 2px solid #F40612; 
} 

Answer 1

試過嗎？

.navbar-right { 
    height: 68px; 
    border-bottom: 2px solid #F40612; 
} 

或者

.navbar-right { 
    height: 70px; 
} 

.navbar-nav li { 
    background-color: #F40612; 
    padding: 0; 
    margin: 0; 
    padding-bottom: 2px; 
} 

.navbar-nav li a { 
    margin: 0; 
    padding: 0; 
    background-color: transparent; 
} 

或jQuery的

<script> 
    $(".active-page").parent().addClass("hightlight"); 
</script> 

.hightlight { 
    background-color: #F40612; 
    padding: 0; 
    margin: 0; 
    padding-bottom: 2px; 
}