【问题标题】:Bootstrap Active Menu Changes Navbar HeightBootstrap 活动菜单更改导航栏高度
【发布时间】:2023-04-08 04:23:01
【问题描述】:

我在活动菜单(引导程序)中添加了一个 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;
}

【问题讨论】:

    标签: jquery html css twitter-bootstrap navbar


    【解决方案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;
    }
    

    【讨论】:

    • 不,它不起作用。如果我放这个,导航栏也会调整大小。
    • 编辑:我在您的代码中找到了解决方案。谢谢! .active-page {border-bottom: 2px solid #F40612; padding-bottom: 23px !important; }
    猜你喜欢
    • 1970-01-01
    • 2014-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多