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