bootstrap 4.3导航-所选项目无法使下边框透明

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类，因此还应该在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