Bootstrap中如何实现父列高度随子列、嵌套同级列内容自适应匹配？

方案1：Bootstrap 4/5 原生工具类实现（无额外自定义代码） #

直接修改原有代码，添加Bootstrap自带的弹性布局工具类即可，完全兼容响应式规则：

<div class="row">
  <!-- 左侧一级列添加d-flex flex-column类 -->
  <div class="col-6 col-sm-3 d-flex flex-column">CONTENT
     <!-- 嵌套row添加flex-grow-1类，自动撑满父列剩余高度 -->
     <div class="row flex-grow-1">
     <!-- 两个次级列添加h-100类，继承父row高度实现等高 -->
     <div class="col-6 col-sm-3 h-100">CONTENT</div>
     <div class="col-6 col-sm-3 h-100">CONTENT</div>
     </div>
  </div>
  <div class="col-6 col-sm-3">CONTENT</div>
</div>

实现原理：Bootstrap 4及以上版本栅格默认使用flex布局，添加的工具类会让内部嵌套列自动拉伸适配最高内容的高度，无需设置固定值，不同屏幕尺寸下会自动适配。

方案2：兼容Bootstrap 3的自定义CSS方案 #

如果使用Bootstrap 3版本，栅格默认是浮动布局，添加少量自定义CSS即可实现：

1. 给嵌套的次级行添加自定义类equal-height-row，给两个次级列添加自定义类equal-height-col
2. 加入以下CSS代码：

.equal-height-row {
  display: flex;
  flex-wrap: wrap;
}
.equal-height-col {
  display: flex;
  align-items: stretch;
}
/* 确保次级列内的内容块占满全高 */
.equal-height-col > * {
  width: 100%;
}

该方案同样支持全响应式适配，不需要设置固定高度。

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