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

Question

选择选项卡时，我试图使底线选项卡变得透明（此处为蓝色）。

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

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

标签： csstwitter-bootstrapnavigation

Answer 1

由于 .active 类设置为 on 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;
}

演示