Bootstrap 5 如何实现不同列内的.item元素等高

方案1：调整DOM结构（无额外自定义CSS，纯Bootstrap原生类实现，兼容性最好） #

把原本左右列各自包裹item的结构，改成按行分组，对应位置的item放在同一行row内，利用Bootstrap栅格默认的flex等高特性实现需求，修改后的代码如下：

<div class="container">
  <!-- 标题行 -->
  <div class="row mb-3">
    <div class="col-8">
      <h3>Title</h3>
    </div>
    <div class="col-4">
      <h3>Title</h3>
    </div>
  </div>
  <!-- 第一组item -->
  <div class="row mb-3">
    <div class="col-8">
      <div class="item p-3 border h-100">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
    </div>
    <div class="col-4">
      <div class="item p-3 border h-100">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
    </div>
  </div>
  <!-- 第二组item -->
  <div class="row mb-3">
    <div class="col-8">
      <div class="item p-3 border h-100">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
    </div>
    <div class="col-4">
      <div class="item p-3 border h-100">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
      </div>
    </div>
  </div>
  <!-- 第三组item -->
  <div class="row mb-3">
    <div class="col-8">
      <div class="item p-3 border h-100">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
      </div>
    </div>
    <div class="col-4">
      <div class="item p-3 border h-100">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
    </div>
  </div>
</div>

说明：给每个item加Bootstrap自带的h-100类，让item撑满父列的高度，同一行内的列默认等高，对应item自然高度一致。 #

方案2：不修改原DOM结构，添加少量自定义CSS #

如果不方便调整HTML结构，可以给两个列设置grid布局，强制行高按比例分配，添加以下CSS即可：

/* 给两个列添加该类，或者直接选择 .container .row > [class^=col-] */
.col-grid {
  display: grid;
  grid-template-rows: auto repeat(3, 1fr);
  gap: 1rem; /* 替换原有的mb-3边距，不需要可以保留原margin */
}
/* 如果保留原mb-3，需要去掉最后一个item的margin避免重复边距 */
.col-grid .item:last-child {
  margin-bottom: 0;
}

然后给原HTML里的col-8和col-4添加col-grid类：

<div class="col-8 col-grid">
<!-- 原有内容不变 -->
</div>
<div class="col-4 col-grid">
<!-- 原有内容不变 -->
</div>

说明：grid-template-rows: auto repeat(3, 1fr) 表示第一行（h3标题）高度自动适配内容，后面3行（对应3个item）高度平均分配，自动对齐。 #

内容的提问来源于stack exchange，提问作者Alan Blue