如何從活動導航選項卡中刪除底部邊框？

Question

這是我得到的：

這是我的片段

 .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; border-width: 3px; border-bottom: 3px solid #fff !important; }

 <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>

我希望刪除活動導航選項卡的底部邊框。

Answer 1

這不是css邊界。 要刪除它，您可以編寫此css

* {
  outline: none !important;
  box-shadown: none !important'
}

這將刪除所有元素周圍的藍色東西。 如果您不想在所有元素上刪除它，只需放置class而不是*

我正在寫!important是因為您正在使用引導程序並且您想覆蓋它的行為。

Answer 2

將active的 class 移動到<li> ，然后您可以使用絕對定位的偽元素來隱藏它，如下所示：

 .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; border-width. 3px: };nav-item { position. relative. }:nav-item:active:;after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -2px; border-bottom: 3px solid #FFF !important; }

 <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 active"> <a class="nav-link" 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>