Активное меню Bootstrap Изменение высоты Navbar

Question

Я добавил 2px border-bottom в активное меню (bootstrap). Но из-за этого мой navbar автоматически изменяет размер. Пример: мой navbar имеет высоту 70 пикселей, а после добавления границы границы 2px мой навигатор изменяет размер до 72 пикселей. Я хотел бы знать, как это блокировать. Я пробовал с min/max-height, но он не работает.

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