bootstrap 4.3 nav-item selected 无法使底部边框透明答案

【问题标题】：bootstrap 4.3 nav-item selected cannot make bottom border transparentbootstrap 4.3 nav-item selected 无法使底部边框透明
【发布时间】：2020-12-28 20:42:59
【问题描述】：

当标签被选中时，我正在尝试使底线标签变为透明（此处为蓝色）。

在下面的图片中，它在“活动”状态下工作，当我单击时，但一旦选择，选项卡仍会在底部显示蓝色谎言，参见。第二张图。

下面是我的 CSS 代码。

.tab-pane {
    border-left: 3px solid #ff6a00;
    border-right: 3px solid #ff6a00;
    border-bottom: 3px solid #ff6a00;
    border-radius: 0px 0px 0px 0px;
    padding: 0px;
}

.nav-item {
    background-color: #efefef;
    border-left: 3px solid #007BFF;
    border-right: 3px solid #007BFF;
    border-top: 3px solid #007BFF;
    border-bottom: 3px solid #007BFF;
}
    .nav-item:active {
        border-bottom-color: transparent;
    }

    .nav-item:current {
        border-bottom-color: transparent;
    }

.nav-tabs {
    margin-bottom: 0;
}

【问题讨论】：

请也发布 HTML 示例

标签： css twitter-bootstrap navigation

【解决方案1】：

由于 .active 类设置在nav-link，自定义边框也应该设置在nav-link...

.nav-tabs .nav-link {
    background-color: #efefef;
    border-left: 3px solid #007BFF;
    border-right: 3px solid #007BFF;
    border-top: 3px solid #007BFF;
    border-bottom: 3px solid #007BFF;
}

.nav-tabs .nav-link.active {
    border: 3px solid #007BFF;
    border-bottom-color: transparent;
}

Demo

【讨论】：