Bootstrap 活动菜单更改导航栏高度

Question

我在活动菜单（引导程序）中添加了一个 2px 边框底部。但正因为如此，我的导航栏会自动调整大小。示例：我的导航栏高度为 70 像素，添加 2 像素边框底部后，我的导航栏调整为 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;
}