如何移除Bootstrap导航标签(nav tab)激活状态下的底部边框

当前实现效果：

解决方案 #

你只需要修改.nav-tabs .nav-link.active对应的CSS规则即可，调整后的完整代码如下：

修改后的CSS代码

.nav-tabs {
    border-bottom: 3px solid #3FA2F7 !important;
}

.nav-tabs .nav-link {
    color: #02194A;
    font-size: 13px;
    padding: 12.5px !important;
}

.nav-tabs .nav-link.active {
    color: #02194A;
    /* 仅为上、左、右三个边设置边框颜色，底部边框默认透明 */
    border-color: #3FA2F7 #3FA2F7 transparent;
    border-width: 3px;
    /* 直接移除激活状态的底部边框 */
    border-bottom: none !important;
}

原HTML代码无需改动

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<ul class="nav nav-tabs nav-tabs-2 justify-content-center d-none d-md-flex">
    <li class="nav-item">
        <a class="nav-link active" id="curreny-tab" data-toggle="tab" href="#curreny" role="tab" aria-controls="curreny" aria-selected="true"><span class="h4 px-4">Curreny Pairs</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="excurreny-tab" data-toggle="tab" href="#excurreny" role="tab" aria-controls="excurreny" aria-selected="true"><span class="h4 px-4">Exotic Curreny Pairs</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="indices-tab" data-toggle="tab" href="#indices" role="tab" aria-controls="indices" aria-selected="true"><span class="h4 px-4">Indicies</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="metals-tab" data-toggle="tab" href="#metals" role="tab" aria-controls="metals" aria-selected="true"><span class="h4 px-4">Metals</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="commodities-tab" data-toggle="tab" href="#commodities" role="tab" aria-controls="commodities" aria-selected="true"><span class="h4 px-4">Commodities - Oil</span></a>
    </li>
</ul>

实现说明

原来的代码是通过给激活态标签的底部边框设置白色，靠和背景同色的方式遮盖下方导航条的蓝色边框，调整后直接移除了激活态标签的底部边框，同时只保留上、左、右三个边的蓝色边框，符合需求。

内容的提问来源于stack exchange，提问作者Praharsh Mishra