如何实现Bootstrap列高度独立？消除列间距空白布局问题

嗨，我来帮你解决这个问题！你遇到的核心问题是Bootstrap的row默认会让所有子列等高（align-items: stretch），所以左边的col-9会被拉伸到和右边长文本的col-3一样高，导致你后续加的内容只能在这个拉伸后的高度下方显示，产生空白。下面给你两种可行的解决方法：

方法一：修改Bootstrap行的对齐方式 #

只需给最外层的row添加align-items-start类，让子列顶部对齐，不再强制等高：

<div class="row text-center align-items-start">
  <div class="col-9">
    <div class="row border">
      <div class="col-9 border">1</div>
      <div class="col-3 border">2</div>
    </div>
    <!-- 这里放你后续新增的div，会紧跟在1、2列下方 -->
    <div class="border mt-2">新增的内容1</div>
    <div class="border mt-2">新增的内容2</div>
  </div>
  <div class="col-3 border">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

原理：align-items-start会覆盖Bootstrap默认的align-items: stretch，让左边的col-9高度由内部内容决定，后续新增的元素自然就会紧跟在1、2列的下方，不会被右边长文本列的高度影响。

方法二：用CSS Grid实现更灵活的布局 #

如果你不想依赖Bootstrap的内置类，也可以用CSS Grid直接定义布局，彻底分离左右两列的高度：

<style>
  .custom-container {
    display: grid;
    grid-template-columns: 75% 25%; /* 对应col-9和col-3的宽度比例 */
    gap: 1rem;
    text-align: center;
  }
  .left-column {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 控制内部元素的间距 */
  }
  .border {
    border: 1px solid #ccc;
    padding: 1rem;
  }
</style>

<div class="custom-container">
  <div class="left-column">
    <div class="row border">
      <div class="col-9 border">1</div>
      <div class="col-3 border">2</div>
    </div>
    <!-- 新增内容会自动紧跟在前两列下方 -->
    <div class="border">新增的内容1</div>
    <div class="border">新增的内容2</div>
  </div>
  <div class="border">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

原理：CSS Grid的列布局是独立的，左边列用flex垂直排列内部内容，新增元素会自然向下延伸，完全不受右边列高度的约束，布局灵活性更强。

内容的提问来源于stack exchange，提问作者Alaa Hershey