如何用CSS实现Bootstrap两列等高布局（内容动态变化）

嘿，这个等高布局的问题我之前做项目时也遇到过，刚好有几个实用的方案能解决，咱们先从结构修正开始，再讲具体实现：

首先得提一下，你的HTML结构有点小问题——Bootstrap的栅格系统要求所有列必须放在row容器内，不然容易出现间距错乱或者布局失效的情况。所以先把结构调整成标准格式：

<div class="col-md-12">
  <div class="row">
    <div class="col-md-4">
      <!-- 这里放动态变化的内容 -->
    </div>
    <div class="col-md-8">
      <div id="map" style="height: 600px;"></div>
    </div>
  </div>
</div>

接下来根据你用的Bootstrap版本，选对应的方案：

方案1：Bootstrap 4/5 原生实现（最简单） #

Bootstrap 4及以上版本本身就是基于Flexbox构建的，默认情况下row就是flex容器，里面的列会自动被拉伸成等高。只要用上面的标准结构，不需要额外加任何类或CSS，col-md-4就会自动和col-md-8保持等高，不管里面的动态内容多还是少。

如果想调整col-md-4里内容的垂直对齐方式（比如内容少的时候居中），直接给列加Bootstrap的flex对齐类就行，比如：

<div class="col-md-4 d-flex align-items-center">
  <!-- 动态内容会垂直居中 -->
</div>

方案2：Bootstrap 3 专用方案 #

如果你还在使用Bootstrap 3，可以用官方提供的row-eq-height类，给外层的row加上这个类就能实现等高列：

<div class="col-md-12">
  <div class="row row-eq-height">
    <div class="col-md-4">
      <!-- 动态内容 -->
    </div>
    <div class="col-md-8">
      <div id="map" style="height: 600px;"></div>
    </div>
  </div>
</div>

注意：这个类依赖Flexbox，如果你需要兼容IE9及以下的旧浏览器，可能需要额外引入前缀或者备用方案。

方案3：自定义CSS（通用所有版本） #

如果上面的方案不适用，或者想更灵活控制，直接写几行自定义CSS就能搞定，同样基于Flexbox：

先给row加个自定义类，比如equal-height：

<div class="col-md-12">
  <div class="row equal-height">
    <div class="col-md-4">
      <!-- 动态内容 -->
    </div>
    <div class="col-md-8">
      <div id="map" style="height: 600px;"></div>
    </div>
  </div>
</div>

然后添加CSS：

.equal-height {
  display: flex;
  flex-wrap: wrap; /* 保证小屏幕下列自动换行，不挤在一起 */
}

/* 让列内部也支持flex布局，方便后续调整内容对齐 */
.equal-height [class*="col-"] {
  display: flex;
  flex-direction: column;
}

这个方案不管你用哪个Bootstrap版本都能生效，而且兼容性也不错（除了极旧的浏览器）。

总结一下，核心就是利用Flexbox的拉伸特性，让列自动匹配最高列的高度，同时保证Bootstrap栅格的结构规范，这样就能完美解决动态内容列和地图列的等高问题啦～

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