Bootstrap 4 Card-Group中如何将按钮对齐至卡片底部

不用再折腾人工空白啦，利用Bootstrap自带的flex布局类就能完美解决这个问题，而且窗口调整大小也不会失效。核心思路是让卡片内容区域变成flex容器，通过自动填充剩余空间把按钮推到底部。

具体实现步骤： #

1. 给每个卡片的card-body添加d-flex flex-column类，把它变成垂直方向的flex容器
2. 在卡片内容（比如文本）和按钮之间，添加一个带有flex-grow-1类的空div，这个div会自动占据剩余的所有垂直空间，把按钮挤到card-body的底部
3. 可选：给按钮加个mt-3类，和上面的内容保持一点间距，视觉效果更舒适

修改后的完整代码示例： #

<div class="card-group">
  <div class="card">
    <div class="card-header">Card 1 Header</div>
    <div class="card-body d-flex flex-column">
      <h5 class="card-title">Card 1 Title</h5>
      <p class="card-text">这里是一段较长的卡片内容，用来模拟高度不一致的情况。比如可以写好几行文字，让这个卡片的内容区域比其他卡片高很多...</p>
      <div class="flex-grow-1"></div>
      <button class="btn btn-primary mt-3">点击操作</button>
    </div>
    <div class="card-footer">Card 1 Footer</div>
  </div>
  <div class="card">
    <div class="card-header">Card 2 Header</div>
    <div class="card-body d-flex flex-column">
      <h5 class="card-title">Card 2 Title</h5>
      <p class="card-text">这是一段短内容</p>
      <div class="flex-grow-1"></div>
      <button class="btn btn-primary mt-3">点击操作</button>
    </div>
    <div class="card-footer">Card 2 Footer</div>
  </div>
  <div class="card">
    <div class="card-header">Card 3 Header</div>
    <div class="card-body d-flex flex-column">
      <h5 class="card-title">Card 3 Title</h5>
      <p class="card-text">中等长度的内容，不多不少刚好两行左右的样子，用来测试不同高度下的对齐效果</p>
      <div class="flex-grow-1"></div>
      <button class="btn btn-primary mt-3">点击操作</button>
    </div>
    <div class="card-footer">Card 3 Footer</div>
  </div>
</div>

方案优势说明： #

• Bootstrap的card-group本身会让所有卡片的高度保持一致，我们只需要处理卡片内部的元素对齐逻辑
• flex-grow-1的div会根据卡片内容的高度自动调整自身高度，不管窗口怎么缩放，都能保证按钮始终在card-body的底部
• 完全利用Bootstrap自带的工具类，不需要额外编写自定义CSS，兼容性和维护性都很好

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