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

Question

我正在尝试在选中选项卡时使底线选项卡变得透明（此处为蓝色）。

下图是在“激活”状态下工作的，当我点击的时候，但是一旦选中，标签仍然显示在底部的蓝色谎言，cf。第二张图

下面是我的 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;
}

Answer 1

由于在 nav-link 上设置了 .active class，自定义边框也应该在 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

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

bootstrap 4.3 nav-item selected cannot make bottom border transparent

css

navigation

twitter-bootstrap