Bootstrap 5中带h-100的stackOverflowCom元素溢出父行的解决求助

核心思路 #

不用给stackOverflowCom加h-100，而是利用Bootstrap的flex布局工具类，让卡片内部的内容容器自动填充剩余空间，把需要底部对齐的内容推到下方，同时避免高度溢出问题。

具体修改步骤 #

1. 给卡片的外层容器（包含标题和内容的div）添加d-flex flex-column h-100类，让卡片成为垂直方向的flex容器，且高度占满父级列空间。
2. 将标题之外需要底部对齐的内容，放在一个单独的容器里，给这个容器加mt-auto类，利用margin-top: auto的特性，让它自动被推到卡片底部。
3. 移除原来加在stackOverflowCom上的h-100类，彻底解决溢出问题。

调整后的代码片段示例 #

<div class="col-md-4 mb-3">
  <div class="card d-flex flex-column h-100">
    <div class="card-body">
      <h5 class="card-title">Red Keep</h5>
      <h6 class="card-subtitle mb-2 text-muted">King's Landing</h6>
      <div class="mt-auto">
        <p class="card-text">这里是需要底部对齐的文本内容</p>
        <a href="#" class="btn btn-primary">查看详情</a>
      </div>
    </div>
  </div>
</div>

原理说明 #

• d-flex flex-column让卡片内部元素垂直排列，h-100确保卡片高度适配父级列的空间，不会出现高度不足的情况。
• mt-auto通过自动填充上方剩余空间，把目标容器推到卡片底部，这种方式是flex布局的空间分配逻辑，不会像强制设置h-100那样触发溢出。

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