添加边框底部时如何确保引导导航栏链接具有相同的高度答案

【问题标题】：How to make sure bootstrap navbar links have same height when add border bottom添加边框底部时如何确保引导导航栏链接具有相同的高度
【发布时间】：2018-03-24 04:59:08
【问题描述】：

我在我的活动菜单类中添加了一个底部边框

@media (min-width: 1040px) {
    #rbc-navbar.navbar-default .navbar-nav > li.active {
        border-bottom: 3px solid #56c7ff;
    }
}

当我将鼠标悬停在其他链接上时，链接看起来好像不在同一高度，因为我在底部添加了边框。

问题：如果我为链接添加边框底部，如何使用引导导航栏确保其他链接都在同一高度？

Codepen Example here 请注意，代码笔现在已更新为工作代码

CSS

#rbc-navbar.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}

#rbc-navbar.navbar-default {
    font-size: 16px;
    background-color: rgba(22, 30, 44, 1);
    border-bottom-width: 0px;
}

@media (min-width: 1040px) {
    #rbc-navbar.navbar-default .navbar-nav > li.active {
        border-bottom: 3px solid #56c7ff;
    }
}

#rbc-navbar.navbar-default .navbar-nav > li > a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(22, 30, 44, 1);
}

#rbc-navbar.navbar-default .navbar-nav > li > a:hover,
#rbc-navbar.navbar-default .navbar-nav > li > a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(63, 71, 81, 1);
}

#rbc-navbar.navbar-default .navbar-nav >.active > a,
#rbc-navbar.navbar-default .navbar-nav >.active > a:hover,
#rbc-navbar.navbar-default .navbar-nav >.active > a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(22, 30, 44, 1);
}

#rbc-navbar.navbar-default .navbar-toggle {
    border-color: #161e2c;
    color: #ffffff;
}

#rbc-navbar.navbar-default .navbar-toggle:hover,
#rbc-navbar.navbar-default .navbar-toggle:focus {
    background-color: #161e2c;
}

#rbc-navbar.navbar-default .navbar-toggle .icon-bar {
    background-color: #161e2c;
}

#rbc-navbar.navbar-default .navbar-toggle:hover .icon-bar,
#rbc-navbar.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #161e2c;
}

HTML

<div id="rbc-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="<?php echo base_url();?>">Riwaka Bowling Club</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>


        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="/">Home</a>
                </li>
                <li><a href="/about-us">About Us</a>
                </li>
                <li><a href="/contact">Contact Us</a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="">Members Login <i class="fa fa-sign-in" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个 CSS，

#rbc-navbar.navbar-default .navbar-nav > li:not(a:hover),#rbc-navbar.navbar-default .navbar-nav > li:not(.active) {
  border-bottom: 3px solid transparent;
}

#rbc-navbar.navbar-default .navbar-nav > li:not(.active) a:hover {
  border-bottom: 3px solid rgba(63, 71, 81, 1);
}

代码笔here

【讨论】：

【解决方案2】：

最简单的方法是为所有菜单项添加透明边框，然后更改活动菜单项的颜色。

@media (min-width: 1040px) {
    #rbc-navbar.navbar-default .navbar-nav > li {
        border-bottom:3px solid transparent;
    #rbc-navbar.navbar-default .navbar-nav > li.active {
        border-bottom-color: #56c7ff;
    }
}

【讨论】：