导航选项卡的底部边框无法像官方网站中那样删除
Nav tabs' bottom border can't removed like given in official site
在导航选项卡的 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>
因此,重要的是 link 您 header 中的正确 css 文件。一旦你这样做了,不需要额外的自定义 css 来让它工作。此外,请确保您可能拥有的其他自定义 css 的 none 会干扰此代码。
删除导航标签 class 并且会起作用
在导航选项卡的 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>
因此,重要的是 link 您 header 中的正确 css 文件。一旦你这样做了,不需要额外的自定义 css 来让它工作。此外,请确保您可能拥有的其他自定义 css 的 none 会干扰此代码。
删除导航标签 class 并且会起作用