Bootstrap嵌套列高度拉伸问题：如何让A1与B1始终等高？

我希望让两行中的前两个列（绿色的A1和紫色的B1）始终保持相同高度。原本尝试用d-flex align-items-stretch实现，但它似乎不起作用，因为这两个元素不在同一行/父元素中。

代码示例：

<div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:green;">A1</div>
        <div class="col-12" style="background-color:blue;">A2</div>
        <div class="col-12" style="background-color:red;">A3</div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:violet;">B1</div>
        <div class="col-12" style="background-color:orange;">B2</div>
        <div class="col-12" style="background-color:gray;">B3</div>
      </div>
    </div>
  </div>
</div>  

为什么align-items-stretch不起作用？ #

align-items-stretch是作用在flex容器上的属性，用来让容器内的子元素拉伸至容器高度。但你的用法存在两个问题：

1. 你把d-flex align-items-stretch加在了A1和B1本身上，它们是单个元素，没有子元素，这个属性自然不会产生效果；
2. A1和B1分别属于两个独立的内部row容器，这两个row的高度仅由自身内容决定，彼此没有关联。虽然最外层的row是flex容器，能让左右两个col-6高度一致，但内部的row并没有继承这个高度，所以A1和B1的高度无法同步。

解决方案 #

方案1：重构HTML结构，将对应元素放在同一行 #

把A1和B1放在同一行的列中，A2/B2、A3/B3分别放在后续行，这样同一行的列自然高度一致：

<div class="container">
  <!-- A1和B1所在行 -->
  <div class="row" style="background-color:yellow;">
    <div class="col-6" style="background-color:green;">A1</div>
    <div class="col-6" style="background-color:violet;">B1</div>
  </div>
  <!-- A2和B2所在行 -->
  <div class="row">
    <div class="col-6" style="background-color:blue;">A2</div>
    <div class="col-6" style="background-color:orange;">B2</div>
  </div>
  <!-- A3和B3所在行 -->
  <div class="row">
    <div class="col-6" style="background-color:red;">A3</div>
    <div class="col-6" style="background-color:gray;">B3</div>
  </div>
</div>

方案2：不修改结构，用Bootstrap工具类实现高度同步 #

利用flex布局的空间填充特性，让A1和B1自动填充父容器的剩余高度：

<div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-6">
      <!-- 内部row设置h-100占满父元素高度，flex-column改为垂直排列 -->
      <div class="row h-100 flex-column">
        <!-- flex-grow-1让A1填充剩余空间 -->
        <div class="col-12 flex-grow-1" style="background-color:green;">A1</div>
        <div class="col-12" style="background-color:blue;">A2</div>
        <div class="col-12" style="background-color:red;">A3</div>
      </div>
    </div>
    <div class="col-6">
      <div class="row h-100 flex-column">
        <div class="col-12 flex-grow-1" style="background-color:violet;">B1</div>
        <div class="col-12" style="background-color:orange;">B2</div>
        <div class="col-12" style="background-color:gray;">B3</div>
      </div>
    </div>
  </div>
</div>

这个方案的核心逻辑：

• 最外层row是flex容器，左右两个col-6高度自动一致；
• 内部row加h-100，让它占满父元素col-6的高度；
• flex-column将内部col-12改为垂直排列；
• flex-grow-1让A1和B1自动填充父容器的剩余空间，从而保持高度同步。

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