我无法让前3列占据100%的宽度，正如您在示例中看到的那样，左右两边都有边距。
我需要上面的3列占据与下表相同的宽度，我只是从引导开始，我不知道如何解决它。
我确信我做错了什么，但我看不出来。
感谢
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<title>Example</title>
</head>
<body>
<div class="container">
<div class="row general pt-3 pb-3">
<div class="col-md-12 pb-1">
<div class="row row-centered d-print-none" id="filters">
<div class="col-md-4 col-centered bg-transparent text-dark text-center">
<div class="p-2 bg-dark text-white">
<h6>FILTER 1</h6>
</div>
</div>
<div class="col-md-4 col-centered bg-transparent text-dark text-center">
<div class="p-2 bg-dark text-white">
<h6>FILTER 2</h6>
</div>
</div>
<div class="col-md-4 col-centered bg-transparent text-dark text-center">
<div class="p-2 bg-dark text-white">
<h6>FILTER 3</h6>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row row-centered">
<div class="col-md-12 col-centered pt-2 mb-2 bg-dark text-white">
<h5 class="text-center">TABLE CAPTION</h5>
</div>
</div>
<div class="row row-centered">
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
</tr>
</thead>
</tbody>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td>EE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>首先，必须将scripts和links包含在head中。然后您有一个孤立的结束标记：</script>，这可能会导致问题。
然后，查看每个过滤器的col-md-4。他们增加了15像素的填充。删除第一个col-md-4元素的padding-left，并删除最后一个col-md-4元素的padding-right
删除代表设置为0px