如何用Bootstrap 5让并排卡片的橙色图标区域固定在底部？

要让带图标的橙色区域始终固定在卡片底部，只需用Bootstrap原生类调整flex布局即可，核心是让中间文本区域填充剩余空间，具体修改如下：

关键改动点 #

• 给每个卡片容器（带col-*的div）添加h-100类，确保所有卡片高度一致；移除冗余的position-relative和justify-content-center类。
• 给包含文本的div添加flex-grow-1类，让它占据卡片内除图片和底部区域外的所有可用空间，自动将底部区域推至卡片底部。
• 移除底部图标容器上的align-items-end类，该类在此场景下无效。

修改后的完整代码 #

CSS（仅补充图标大小样式，原有样式保留） #

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
.coolspan {
  background-color: #a71a0b !important;
  color: #fff !important;
}
.big-icon {
  font-size: 2rem; /* 可选：调整图标大小 */
  padding: 0.5rem;
}

HTML #

<h2 class="text-center">Title</h2>
<div class="row justify-content-center">
  <div class="m-3 py-3 col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12 border rounded-2 border-dark d-flex flex-column h-100">
    <div class="d-flex">
      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">
    </div>
    <div class="flex-grow-1">
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <div class="d-flex justify-content-center coolspan rounded-2 shadow">
      <i class="bi bi-person-circle big-icon"></i>
    </div>
  </div>

  <div class="m-3 py-3 col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12 border rounded-2 border-dark d-flex flex-column h-100">
    <div class="d-flex ">
      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">
    </div>
    <div class="flex-grow-1">
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <div class="d-flex justify-content-center coolspan rounded-2 shadow">
      <i class="bi bi-person-circle big-icon"></i>
    </div>
  </div>

  <div class="m-3 py-3 col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12 border rounded-2 border-dark d-flex flex-column h-100">
    <div class="d-flex ">
      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">
    </div>
    <div class="flex-grow-1">
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <div class="d-flex justify-content-center coolspan rounded-2 shadow">
      <i class="bi bi-person-circle big-icon"></i>
    </div>
  </div>
</div>

原理说明 #

• h-100让所有卡片继承父容器高度，保证卡片等高；
• flex-grow-1让文本区域自动填充卡片内剩余空间，强制底部区域被推到卡片最下方；
• 移除冗余类后，布局更简洁，完全依赖Bootstrap原生flex类实现需求。

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