Bootstrap col-md-4列内卡片子元素无法占满高度的疑问

嘿，我太懂你这种烦恼了——用col-md-4布局不同内容的卡片时，内容高度参差不齐，导致卡片没法撑满所在列的高度，之前试的方法没起效确实让人挠头。下面给你几个靠谱的解决思路，都是实战中常用的：

方法一：用Bootstrap原生Flex类（最简单！） #

如果你的项目用的是Bootstrap 4及以上版本，直接利用框架自带的flex类就能搞定，不用写额外CSS：

• 给包裹列的.row加上d-flex flex-wrap，让行变成flex容器
• 给每个卡片元素加上h-100，强制卡片占满父容器（col-md-4）的高度

示例代码：

<div class="row d-flex flex-wrap">
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <!-- 第一个卡片的内容 -->
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <!-- 第二个卡片的内容（更长） -->
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <!-- 第三个卡片的内容 -->
      </div>
    </div>
  </div>
</div>

方法二：自定义Flex CSS（适配旧版Bootstrap） #

如果还在使用Bootstrap 3，框架本身没有原生flex支持，那可以自己写一点CSS：

/* 让行变成flex容器，自动适配列高度 */
.equal-height-row {
  display: flex;
  flex-wrap: wrap;
}

/* 让列变成flex容器，卡片可以撑满高度 */
.equal-height-row .col-md-4 {
  display: flex;
}

/* 让卡片占满列的可用空间 */
.equal-height-row .card {
  flex: 1;
}

然后在HTML里给行加上equal-height-row类就行。

方法三：CSS Grid布局（现代浏览器友好） #

如果你不需要兼容太老的浏览器，CSS Grid也是个很棒的选择，布局更灵活：

.card-grid-row {
  display: grid;
  /* 自动适配屏幕，最小宽度300px，每行3列 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem; /* 列之间的间距 */
}

.card-grid-row .card {
  height: 100%;
}

HTML里把行的类换成card-grid-row即可，这种方式不用管列的类，Grid会自动帮你分配空间。

为什么你之前的方法没起效？ #

你提到的display: inline-block加height: 100%无效，是因为父元素（col-md-4）的高度是由内容撑开的，不是固定值，所以子元素的height:100%找不到可以继承的高度基准；而display: table的方法需要把整个行、列都改成table相关结构，步骤繁琐，不如上面的flex/grid方案直接高效。

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