Bootstrap 5卡片card-footer底部对齐问题求助

针对你遇到的Bootstrap 5卡片footer无法固定在底部的问题，核心解决思路是利用Bootstrap的flex布局工具类，让卡片主体自动填充剩余空间，从而将footer推至底部。具体操作如下：

1. 明确卡片的flex布局结构
   你的卡片已设置h-100保证高度一致，在此基础上给卡片添加d-flex flex-column类，明确其为垂直方向的flex容器：

   <div class="card h-100 d-flex flex-column">
   

2. 让card-body自动填充剩余空间
   给card-body添加flex-grow-1类，这个类会让body部分占据卡片内除header、footer外的所有可用空间，自然将footer挤到底部：

   <div class="card-body flex-grow-1">
     <!-- 商品标题、描述等内容 -->
   </div>
   

3. 完整示例代码

   <div class="col-md-4 mb-4">
     <div class="card h-100 d-flex flex-column">
       <img src="商品图片地址" class="card-img-top" alt="商品名称">
       <div class="card-body flex-grow-1">
         <h5 class="card-title">商品名称</h5>
         <p class="card-text">这里是商品的详细描述内容，无论长度多少，footer都会固定在底部</p>
       </div>
       <div class="card-footer">
         <small class="text-muted">SKU: ABC123 | 价格: $99.99</small>
       </div>
     </div>
   </div>
   

为什么之前的尝试无效？ #

• 统一图片尺寸只能解决图片高度不一致的问题，但商品标题、描述长度不同依然会导致card-body高度变化，无法从根本上固定footer。
• Bootstrap 4的元素布局逻辑与Bootstrap 5存在差异，直接套用反而会破坏现有布局。

这个方案完全基于Bootstrap 5原生工具类，无需额外自定义CSS，能完美适配你已设置的h-100卡片高度，确保footer始终固定在卡片底部。

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