Bootstrap卡片高度控制位置咨询：删除card-footer后出现空白

问题背景 #

我正在修改一款Start Bootstrap模板应用，原始核心代码如下：

<div class="row">
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <img class="card-img-top" src="http://placehold.it/300x200" alt="">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">...</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <!-- 另外两个结构完全一致的卡片列 -->
</div>

我移除了带有class="card-footer"的div来删除“Find Out More!”按钮，但这导致card-text下方出现了大量空白区域。用浏览器样式检查器没找到直接控制卡片高度的CSS类，虽然看到卡片上应用了h-100，但修改它并没有改变整体高度。想问问这段代码里的卡片高度到底由什么控制？

问题分析&解答 #

这是Bootstrap的Flexbox行布局和h-100类共同作用的结果，拆解一下逻辑：

1. .row的默认等高特性：Bootstrap的.row类默认启用display: flex，它的直接子元素（也就是.col-md-4）会被自动拉伸到同一高度——这是flex布局的默认行为，目的是实现等高列效果，所以三个列的高度会由其中内容最多的那个列决定。
2. h-100的强制填充作用：你给卡片添加的h-100类，是让卡片占满父容器（.col-md-4）的100%高度。当你移除其中一个卡片的card-footer后，这个卡片的内容高度变矮了，但.col-md-4的高度还是和另外两个带footer的列保持一致，所以h-100会强制卡片拉伸到列的高度，多余的空间就变成了card-text下方的空白。

两种解决思路 #

根据你的需求，可以选下面两种方式处理：

• 不需要等高卡片的情况：给.row添加Bootstrap的align-items-start类，这样列的高度会由自身内容决定，卡片也不会被强制拉伸，空白自然消失。修改后的行代码：

  <div class="row align-items-start">
    <!-- 你的卡片列内容 -->
  </div>
  

  或者直接去掉卡片上的h-100类，也能达到同样效果。
• 要保持等高但消除底部空白的情况：给.card-body添加flex-grow-1类，让卡片主体部分自动填充卡片内的剩余空间，把空白挤到不可见。修改后的卡片结构：

  <div class="card h-100">
    <img class="card-img-top" src="http://placehold.it/300x200" alt="">
    <div class="card-body flex-grow-1">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">...</p>
    </div>
    <!-- 已移除card-footer -->
  </div>
  

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