求实现Bootstrap两等高列的类或方案（附代码示例）

嗨，我来帮你搞定这个问题～针对Bootstrap里不同内容长度的列实现等高，分几种情况给你具体方案：

方法1：Bootstrap 4+ 原生Flexbox类（最推荐） #

Bootstrap 4及以上版本默认采用Flexbox布局，row本身就是flex容器，只要给列和内部的panel加上h-100类，就能让它们自动撑满父容器的高度。

修改你的代码（补上panel结构）：

<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default h-100">
          <div class="panel-body">
            lorem ipsum lorem ipsum lorem ipsum
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default h-100">
          <div class="panel-body">
            lorem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

说明：h-100类会设置元素的高度为100%，让列和panel都填满所在行的高度，自然就实现了等高。

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

如果你还在使用Bootstrap 3（它不支持原生Flexbox），可以用自定义CSS来实现：

首先添加自定义样式：

.equal-height-row {
  display: table;
  width: 100%;
}
.equal-height-col {
  display: table-cell;
  float: none;
}
.panel.equal-height-panel {
  height: 100%;
}

然后修改HTML结构：

<div class="row">
  <div class="col-md-12">
    <div class="row equal-height-row">
      <div class="col-md-6 equal-height-col">
        <div class="panel panel-default equal-height-panel">
          <div class="panel-body">
            lorem ipsum lorem ipsum lorem ipsum
          </div>
        </div>
      </div>
      <div class="col-md-6 equal-height-col">
        <div class="panel panel-default equal-height-panel">
          <div class="panel-body">
            lorem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

说明：通过display: table和display: table-cell让列像表格单元格一样等高，再给panel设置100%高度填满列空间。

方法3：用Bootstrap Card替代Panel（Bootstrap 4+推荐） #

Bootstrap 4开始已经不再推荐使用Panel组件，官方推荐用Card替代，结合Flexbox实现等高更简洁：

<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            lorem ipsum lorem ipsum lorem ipsum
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            lorem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum orem ipsum lorem ipsum lorem ipsum
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card组件本身适配Flexbox，加上h-100就能轻松实现等高，代码更简洁易维护。

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