Question

我创建了如下的Bootstrap 4导航选项卡：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
      aria-selected="true">SavedAssets</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
      aria-selected="false">SubmittedAssets</a>
  </li>
</ul>

我想将nav-tabs的默认外观更改为下图所示： Tabs image

默认情况下，第一个标签页应以蓝色突出显示，单击第二个标签页后，蓝线将从第一个标签页移至第二个标签页。

可以帮您编写CSS吗？谢谢

Answer 1

像这样添加，您可以得到所需的准确结果，而无需使用pingInterval

片段!important和下面的CSS做同样的事情，但下面的CSS是简单且更少的代码

CSS

.nav-tabs .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
    color: gray;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border-radius: 0;
    border-bottom: 2px solid blue;
}

Answer 2

在您自己的css文件中，只需覆盖引导程序样式即可。示例：

.nav-link {
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid grey !important;
  border-color: none !important;
}

.nav-link.active {
  border-bottom: 2px solid blue !important;
  color: #000000 !important;
}

CSS更改Bootstrap 4导航选项卡的默认外观

2 个答案: