如何在引导选项卡上编辑（更改颜色和边框像素）？
Posted
技术标签:
【中文标题】如何在引导选项卡上编辑（更改颜色和边框像素）？【英文标题】：How do I edit (change color and border px) on bootstrap tabs? 【发布时间】：2021-08-28 22:00:44 【问题描述】：我有引导标签，标签周围边框的默认颜色是浅灰色。我想将选项卡周围的边框从浅灰色变为深蓝色。我找不到为其设置样式的类或元素。如何设置所有选项卡边框的样式？
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$('#myTable').on('click', '.clickable-row', function(event)
$(this).addClass('active').siblings().removeClass('active');
);
</script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#invoice_selection">Invoice Selection</a></li>
<li><a data-toggle="tab" href="#order_summary">Order Summary</a></li>
</ul>
<div class="tab-content">
<div id="invoice_selection" class="tab-pane fade in active">
<div class="table-responsive">
<table class="table" id="myTable">
<thead>
<tr class="clickable-row">
<th>Select</th>
<th>Invoice Number</th>
<th>Due Date</th>
<th>Proce</th>
<th>Due in Days</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" unchecked>
</div>
</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="order_summary" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：像这样改变标签的边框颜色：
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover
border-left-color: darkblue;
border-top-color: darkblue;
border-right-color: darkblue;
或者更短的方式：
border: 1px solid darkblue;
border-bottom: 0;
【讨论】：
【参考方案2】：.nav-tabs,
.table *,
.active a,
.table-responsive ,
.clickable-row th
border-color: #eaeaea!important;
【讨论】：
以上是关于如何在引导选项卡上编辑（更改颜色和边框像素）？的主要内容，如果未能解决你的问题，请参考以下文章