如何设置Bootstrap卡片统一高度，限最大高度且随内容自适应？

实现思路 #

通过Bootstrap的flex布局类配合自定义CSS，同时满足两个核心需求：

1. 所有卡片高度自动对齐，以内容最多的卡片高度为基准
2. 卡片内容区设置最大高度阈值，超出部分自动显示滚动条，避免卡片高度无限制增长

具体实现代码 #

HTML结构

<div class="container mt-4">
  <div class="row g-4">
    <!-- 卡片1 -->
    <div class="col-md-4">
      <div class="card d-flex flex-column h-100">
        <div class="card-header">卡片标题1</div>
        <div class="card-body flex-fill overflow-auto">
          <p class="card-text">这里是较短的卡片内容，仅占少量空间。</p>
        </div>
        <div class="card-footer text-muted">卡片底部</div>
      </div>
    </div>
    <!-- 卡片2 -->
    <div class="col-md-4">
      <div class="card d-flex flex-column h-100">
        <div class="card-header">卡片标题2</div>
        <div class="card-body flex-fill overflow-auto">
          <p class="card-text">这里是大量的卡片内容，用于测试高度限制效果。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>
          <p class="card-text">继续添加内容，确保超过最大高度阈值。Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
        </div>
        <div class="card-footer text-muted">卡片底部</div>
      </div>
    </div>
    <!-- 卡片3 -->
    <div class="col-md-4">
      <div class="card d-flex flex-column h-100">
        <div class="card-header">卡片标题3</div>
        <div class="card-body flex-fill overflow-auto">
          <p class="card-text">这里是中等长度的卡片内容，介于短内容和长内容之间。Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="card-footer text-muted">卡片底部</div>
      </div>
    </div>
  </div>
</div>

CSS样式

/* 全局设置卡片内容区的最大高度 */
.card .card-body {
  max-height: 300px; /* 可根据需求自定义此数值 */
}

关键类说明 #

• d-flex flex-column h-100：将卡片设为垂直方向的flex容器，同时让卡片高度占满父列空间，确保所有卡片基础高度统一。
• flex-fill：让.card-body填充卡片的剩余空间，保证卡片头部和底部高度固定时，内容区自动分配可用空间。
• overflow-auto：当内容超过max-height时，自动显示垂直滚动条，避免内容溢出。
• max-height：限制内容区的最大高度，防止卡片因内容过多而无限增高。

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