Bootstrap水平卡片的card-footer无法固定在底部该如何解决

你可以用Bootstrap内置的弹性布局工具类实现需求，不需要自定义CSS，也不用硬改card-footer的结构，代码示例如下：

<div class="card" style="max-width: 540px;">
  <div class="row g-0">
    <!-- 左侧图片列 -->
    <div class="col-md-4">
      <img src="占位图地址" class="img-fluid rounded-start" alt="卡片配图">
    </div>
    <!-- 右侧内容列 -->
    <div class="col-md-8">
      <!-- 核心配置：给card-body加三个类，转垂直弹性布局、占满列高度 -->
      <div class="card-body d-flex flex-column h-100">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是卡片的普通正文内容，内容长度变化不会影响底部文本的对齐效果。</p>
        <!-- 要对齐到列底部的文本加mt-auto，自动撑开上方空余空间 -->
        <p class="card-text mt-auto mb-0"><small class="text-muted">这段文本会固定对齐到第二列末尾</small></p>
      </div>
    </div>
  </div>
</div>

实现说明 #

• 给右侧列的.card-body添加h-100是为了保证容器占满第二列的全部高度，为弹性布局提供足够的分配空间
• d-flex flex-column会把card-body的默认布局改成垂直方向的弹性布局，内部元素按垂直方向排列
• mt-auto是Bootstrap内置的margin-top: auto工具类，在垂直弹性布局中会自动填充元素上方的所有空余空间，直接把元素推到容器底部，适配所有响应式尺寸

之前用card-footer不生效的原因是：card-footer默认是全卡片宽度的底部组件，放在水平卡片的第二列内时，默认和同层级的card-body是水平排列关系，不会自动填充列高实现底部对齐。

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