Bootstrap 4列在Chrome中对齐异常，Firefox正常，求技术排查

这个问题我之前也碰到过，Bootstrap 4的card-columns依赖CSS多列布局实现，而它所在的col又是flex容器（Bootstrap的row用的是flex布局），Chrome和Firefox对这种混合布局的高度计算逻辑有差异，才导致了对齐异常。下面给你几个可行的修复方案：

方案一：强制flex容器正确计算高度 #

给包含card-columns的col添加d-flex flex-column类，让它变成垂直方向的flex容器，再给card-columns加上flex-grow-1，确保它占满容器的可用空间，这样Chrome就能正确识别左侧列的高度，和右侧列对齐。

修改后的代码如下：

<main role="main" class="container-fluid">
  <div class="row">
    <!-- 左侧列：添加d-flex flex-column确保flex布局正确计算高度 -->
    <div class="col d-flex flex-column">
      <div class="card-columns flex-grow-1">
        <!-- PHP循环生成的卡片 -->
        <?php foreach($items as $item): ?>
        <div class="card">
          <div class="card-header">Título del artículo</div>
          <div class="card-body">
            [内容]
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <!-- 右侧列保持不变 -->
    <div class="col col-3">
      [内容]
    </div>
  </div>
</main>

方案二：改用网格系统替代card-columns #

如果你的卡片布局不需要严格的“瀑布流”多列效果，也可以用Bootstrap的网格系统来排列卡片，这样完全基于flex布局，兼容性更好：

<main role="main" class="container-fluid">
  <div class="row">
    <!-- 左侧列：用嵌套row来排列卡片 -->
    <div class="col">
      <div class="row">
        <?php foreach($items as $item): ?>
        <!-- 每3张卡片占一行，响应式调整 -->
        <div class="col-md-4 mb-3">
          <div class="card h-100">
            <div class="card-header">Título del artículo</div>
            <div class="card-body">
              [内容]
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <div class="col col-3">
      [内容]
    </div>
  </div>
</main>

这里h-100类可以让卡片高度一致，避免网格布局里的高度参差不齐。

方案三：设置最小高度兜底 #

如果上面的方案都不适用，你可以给包含card-columns的容器设置一个最小高度，强制Chrome识别左侧列的高度范围：

.card-columns-container {
  min-height: 500px; /* 根据实际内容调整数值 */
}

然后给左侧的div添加这个类：

<div class="col card-columns-container">
  <div class="card-columns">
    <!-- 卡片内容 -->
  </div>
</div>

推荐优先用方案一，它既保留了card-columns的瀑布流效果，又解决了浏览器兼容问题。

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