如何让较矮的列拉伸至所在行的高度？

嘿，这个问题在Bootstrap 3里太常见了！因为Bootstrap 3默认用浮动布局，列的高度会跟着内容走，内容少的列就会显得矮，特别不协调。我给你两个靠谱的解决办法，随便选一个都能搞定：

方法1：Table布局兼容法（适合全浏览器） #

这个方法利用CSS表格布局特性，让所有列自动等高，老浏览器也能完美支持：

修改后的CSS代码 #

/* 给Row添加等高样式 */
.equal-height-row {
  display: table;
  width: 100%;
  table-layout: fixed; /* 保证列宽度均匀分配 */
}

/* 让列变成表格单元格，取消Bootstrap默认浮动 */
.equal-height-row [class*="col-"] {
  display: table-cell;
  float: none;
  vertical-align: top; /* 内容默认顶部对齐，也可以改成middle居中 */
}

.customDiv {
  background-color: white;
  text-align: center;
  border: 1px solid red;
  height: 100%; /* 关键！让内部Div填满列的高度 */
}

body {
  background-color: black;
}

对应的HTML代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 给Row加上自定义的equal-height-row类 -->
<div class="row equal-height-row">
  <div class="col-md-4">
    <div class="customDiv">
      这是内容较多的列<br>
      多几行测试内容<br>
      拉高整体高度
    </div>
  </div>
  <div class="col-md-4">
    <div class="customDiv">
      我是原本较矮的列，现在会自动拉伸啦！
    </div>
  </div>
  <div class="col-md-4">
    <div class="customDiv">
      第三列内容区域
    </div>
  </div>
</div>

额外优化：响应式适配

如果需要在小屏幕（手机端）让列自动换行，再加一段媒体查询：

@media (max-width: 767px) {
  .equal-height-row {
    display: block;
  }
  .equal-height-row [class*="col-"] {
    display: block;
    float: left; /* 恢复Bootstrap默认的浮动布局 */
  }
}

方法2：Flex布局法（现代浏览器优先） #

如果你的项目不需要兼容IE9及以下这类老浏览器，用Flex布局会更简洁高效：

修改后的CSS代码 #

/* 给Row添加Flex布局 */
.flex-row {
  display: flex;
  flex-wrap: wrap; /* 保持响应式，小屏幕自动换行 */
}

/* 让列平分可用空间 */
.flex-row [class*="col-"] {
  flex: 1;
}

.customDiv {
  background-color: white;
  text-align: center;
  border: 1px solid red;
  height: 100%; /* 同样要加这个，让内部Div填满高度 */
}

body {
  background-color: black;
}

对应的HTML代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 给Row加上flex-row类 -->
<div class="row flex-row">
  <div class="col-md-4">
    <div class="customDiv">
      这是内容较多的列<br>
      多几行测试内容<br>
      拉高整体高度
    </div>
  </div>
  <div class="col-md-4">
    <div class="customDiv">
      我是原本较矮的列，现在会自动拉伸啦！
    </div>
  </div>
  <div class="col-md-4">
    <div class="customDiv">
      第三列内容区域
    </div>
  </div>
</div>

关键提醒 #

不管用哪个方法，一定要给.customDiv加上height: 100%！因为就算列的高度被拉平了，内部的Div如果没设置高度，还是会只包裹自己的内容，达不到你要的拉伸效果哦～

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