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

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>

我想将导航选项卡的默认外观更改为如下图所示：选项卡图像

默认情况下，第一个选项卡应用蓝线突出显示，单击第二个选项卡

后，蓝线将从第一个选项卡移动到第二个选项卡。

你能帮忙为此编写 css 吗？谢谢

Answer 1

这样添加，您可以获得所需的确切结果，并且使用更少的!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;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.nav-tabs .nav-link {
    color: gray;
    border: 0;
    border-bottom: 1px solid grey;
}
.nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
}
.nav-tabs .nav-link.active {
    color: #000000;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid blue;
}
</style>
<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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

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;
}