<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;">&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;!-- Required meta tags --&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;!-- Bootstrap CSS --&gt; &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt; &lt;title&gt;Bootsrap 5 accordion&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="col-4 colored-bg1"&gt;Column 1 header&lt;/div&gt; &lt;div class="col-4 colored-bg2"&gt;Column 2 header&lt;/div&gt; &lt;div class="col-4 colored-bg1"&gt;Column 3 header&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="accordion" id="accordionExample"&gt; &lt;div class="accordion-item"&gt; &lt;div class="accordion-header" id="headingOne"&gt; &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"&gt; &lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="col-4 colored-bg1"&gt;Column 1 overview&lt;/div&gt; &lt;div class="col-4 colored-bg2"&gt;Column 2 overview&lt;/div&gt; &lt;div class="col-4 colored-bg1"&gt;Column 3 overview&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/button&gt; &lt;/div&gt; &lt;div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"&gt; &lt;div class="accordion-body"&gt; &lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="col-4 colored-bg1"&gt;Column 1 details&lt;/div&gt; &lt;div class="col-4 colored-bg2"&gt;Column 2 details&lt;/div&gt; &lt;div class="col-4 colored-bg1"&gt;Column 3 details&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-4 colored-bg1"&gt;Column 1 details&lt;/div&gt; &lt;div class="col-4 colored-bg2"&gt;Column 2 details&lt;/div&gt; &lt;div class="col-4 colored-bg1"&gt;Column 3 details&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre> </p>

<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 -->