我有这些列表项。当事件选项卡变为 Page_1 时, 我想要 <li>有border-bottom: solid 1px #000;与 Bootstrap 自己的样式相反/
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#Home" role="tabpanel" class="nav-
link active">Home</a>
</li>
<li><a data-toggle="tab" href="#Page_1" role="tabpanel" class="nav-
link">Page 1</a>
</li>
</ul>
最佳答案
选择您要覆盖的 Bootstrap 项目，然后确保在您的样式文件中创建您自己的 Bootstrap 类，该类在 Bootstrap css 文件加载后加载。单击一个选项卡以将其突出显示为事件状态，注意 Bootstrap 的顺序，然后是自定义样式:
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: moccasin;
border-bottom: 2px solid green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: moccasin;
border-bottom: 2px solid green;
}
</style>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
</body>
</html>关于twitter-bootstrap - 在 Bootstrap 4 中处于事件状态时如何向选项卡添加自定义样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53734426/