2

在导航选项卡的 agular 官方页面上，我们没有选定选项卡的底部边框

官方网站

但是当我使用相同的代码时，即使在选定的导航项上我也会得到一个边框

我的标签示例

这是我的 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);
}

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

4

2 回答 2

0

编辑：我之前犯了一个错误。这是正确的代码（注意相应的 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 都不会干扰此代码。

于 2018-01-13T20:23:57.487 回答
0

删除 nav-tabs 类并将工作

于 2018-08-26T06:21:32.880 回答