Bootstrap布局问题：如何让Accordion展开仅占用对应列下方空间

问题根源在于你使用了两个独立的row，每个row的列是上下堆叠的。当第一个row的col-md-4中Accordion展开时，会拉高整个第一个row的高度，导致第二个row整体下移，而第二个row的col-md-8会出现在第一个row拉高后的右侧区域下方，从而产生空白。

解决方案 #

将左右两侧的内容分别归拢到同一列中：左侧用一个col-md-8包含原两个row的左侧内容，右侧用一个col-md-4包含Accordion和原第二个row的右侧内容。这样Accordion展开时只会在右侧列内向下延伸，不会影响左侧布局。

修改后的代码示例 #

<div class="container">
  <div class="row">
    <!-- 左侧统一列 -->
    <div class="col-md-8">
      <div class="p-3 bg-light border">Row 1 左侧内容</div>
      <div class="p-3 bg-light border mt-3">Row 2 左侧内容</div>
    </div>
    <!-- 右侧统一列 -->
    <div class="col-md-4">
      <!-- Accordion 组件 -->
      <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Accordion 标题
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              这是Accordion展开后的内容，会在右侧列内向下延伸，不会影响左侧布局。<br>
              可以添加更多内容来测试高度：<br>
              内容行1<br>
              内容行2<br>
              内容行3<br>
              内容行4<br>
              内容行5
            </div>
          </div>
        </div>
      </div>
      <!-- 原Row 2右侧内容 -->
      <div class="p-3 bg-light border mt-3">Row 2 右侧内容</div>
    </div>
  </div>
</div>

为什么这样有效？ #

Bootstrap的网格系统中，同一row内的列是并排布局的，高度会自动对齐到最高的列。将左侧所有内容放入单个列后，它会持续占据左侧8份宽度；右侧列包含Accordion和后续内容，Accordion展开时只会增加右侧列的高度，左侧列的内容会自然上下排列，不会出现空白区域。

内容的提问来源于stack exchange，提问作者Naqi Ch