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

Question

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

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

Bootstrap Active Menu Changes Navbar Height

html

css

jquery

navbar

twitter-bootstrap