<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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDJLIm9Na3 "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>
第 3 列概覽
概述和詳細資訊部分已經使用相同的填充。 在手風琴上方的標題周圍添加一個包裝div，並給它與概述和詳細信息部分相同的填充，即padding: 1rem 1.25rem;
<div style="padding: 1rem 1.15rem;"> <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> <!-- end snippet -->