부트 스트랩 활성 메뉴 변경 사항 Navbar 높이

Question

활성 메뉴 (부트 스트랩)에 2px border-bottom을 추가했습니다. 하지만 그 때문에 내 탐색 바가 자동으로 크기가 조정됩니다. 예 : 내 navbar의 높이가 70px이고 2px border-bottom을 추가 한 후 내 navbar의 크기가 72px로 조정됩니다. 나는 그것을 차단하는 방법을 알고 싶다. 나는 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; 
}