bootstrap 4 nav-tabs突出显示活动状态

Question

当我点击其他选项时，我的导航标签处于活动状态时出现问题。它在bootstrap 3中工作，但我使用了bootstrap 4。现在它无法正常工作

这是我的标签。

这是我的HTML：

<ul class="nav nav-tabs animation" role="tablist" >


                                                <li class="active" ><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
                                                <li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
                                                <li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
                                                <li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
                                                <li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
                                                <li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
                                    </ul>

我的css在bootstrap 3中工作：

.nav-tabs > li > a:focus, .nav-tabs > li > a:hover {
  background: transparent;
  outline: 0;

}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:active {
  background: transparent;
  color: #FFF;
  cursor: default;
  border: 0;
}

.nav-tabs>li>a {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  border: 0px;
  font-weight: bold;
  padding: 12px 15px 14px 15px;
}

.nav-tabs>li >a:hover {
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

.nav-tabs>li.active>a:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: white;

}

  

.nav袢＆GT; li.active＆gt;一种：后

多数民众赞成在那里我得到了下面这些行，并且在点击其他标签时需要切换。