html - 导航选项卡的底部边框无法像官方网站中一样删除

在导航标签的agular官方页面上，我们没有所选标签的底部边框

official page

但是，当我使用相同的代码时，即使在所选的导航项目上也得到了边框

myTab example

这是我的HTML代码

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">tab 3</a>
    </li>
</ul>`

和我的CSS：

.nav-item .active
{
background-color: rgb(119, 218, 218) !important;
border-bottom: 0px;
color:rgb(168, 19, 168);
}

有人可以告诉我从活动的导航项目中删除边框底部吗？？？

最佳答案

编辑：我以前犯了一个错误。这是正确的代码（请注意相应的CSS文件）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

因此，在标头中链接正确的css文件很重要。完成此操作后，无需其他自定义CSS即可使其工作。另外，请确保您可能拥有的其他自定义css均不会干扰此代码。

关于html - 导航选项卡的底部边框无法像官方网站中一样删除，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48243950/