我正在尝试在 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;}感谢您的帮助。亲切的问候， 米盖尔
1 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
这段代码将解决您的问题。
.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>
<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">
<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>
- 1 回答
- 0 关注
- 69 浏览
添加回答
举报
0/150
提交
取消