Question

我在活动菜单（bootstrap）中添加了2px border-bottom。但正因为如此，我的导航栏自动调整大小。示例：我的导航栏高度为70px，添加2px border-bottom后，我的导航栏调整为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 Active菜单更改Navbar高度

1 个答案: