如何更改此活动导航选项卡的颜色？答案

【问题标题】：How can I change the color of this active nav-tab?如何更改此活动导航选项卡的颜色？
【发布时间】：2020-03-15 04:31:57
【问题描述】：

我正在尝试在 natab 处于活动状态时更改颜色。我正在使用 Bootstrap 4.1.3。

我希望看到橙色选项卡处于活动状态（单击）和另一个白色选项卡（就像现在一样）。我怎样才能在 CSS 中做到这一点？我在 Stackoverflow 中看到了很多问题，但其中任何一个都对我有所帮助。

代码如下： HTML：

<div class="container" align="center">
<nav>
    <div class="nav nav-tabs nav-fill nav-test" role="tablist">
        <a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a>
        <a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a>
    </div>
</nav>

CSS

.nav-diables {
    color: Black;
    background-color: White;
    text-decoration:none;
    font-weight: bold;
}
.nav-diables > li.active {
    color: White;
    background-color: #FF7400 !important;
    text-decoration:none;
    font-weight: bold;
}

感谢您的帮助。

亲切的问候，米克尔

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

此代码将解决您的问题。

.nav-item {
    color: black;
    background-color: white;
    text-decoration:none;
    font-weight: bold;
}
a.nav-item.nav-link.active {
    color: white;
    background-color: #f90;
    text-decoration:none;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
 <div class="container" align="center">
<nav class="nav nav-pills nav-justified" role="tablist">
        <a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a>
        <a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a>
</nav>
    </div>
</body>
</html>

【讨论】：

谢谢。我没有使用药片，但使用标签正在工作。非常感谢，我只需要“a.nav-item.active ...”。已解决，谢谢！