<p>我正在尝试对齐三个Bootstrap 5网格：</p>
<ul>
<li>折叠面板外的标题</li>
<li>折叠面板标题中的概述</li>
<li>折叠面板内容中的详细信息</li>
</ul>
<p>折叠面板标题有左右边距/填充，并且折叠图标也占用一些空间。</p>
<p>我希望标题和详细信息的网格使用与概述网格相同的“边距”。</p>
<p>我尝试添加一个带有填充的列，例如“ps-4 pe-4”，但最多只能获得近似对齐。</p>
<p></p>
<pre class="brush:css;toolbar:false;">.colored-bg1 {
background: lightgray
}
.colored-bg2 {
background: lightyellow
}</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Bootsrap 5 accordion</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4 colored-bg1">Column 1 header</div>
<div class="col-4 colored-bg2">Column 2 header</div>
<div class="col-4 colored-bg1">Column 3 header</div>
</div>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="container-fluid">
<div class="row">
<div class="col-4 colored-bg1">Column 1 overview</div>
<div class="col-4 colored-bg2">Column 2 overview</div>
<div class="col-4 colored-bg1">Column 3 overview</div>
</div>
</div>
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="container-fluid">
<div class="row">
<div class="col-4 colored-bg1">Column 1 details</div>
<div class="col-4 colored-bg2">Column 2 details</div>
<div class="col-4 colored-bg1">Column 3 details</div>
</div>
<div class="row">
<div class="col-4 colored-bg1">Column 1 details</div>
<div class="col-4 colored-bg2">Column 2 details</div>
<div class="col-4 colored-bg1">Column 3 details</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html></pre>
</p>
1
308
概述和详细信息部分已经使用相同的填充。 在手风琴上方的标题周围添加一个包装div，并给它与概述和详细信息部分相同的填充，即padding: 1rem 1.25rem;