Bootstrap4水平滚动卡片高度不等问题求解

关键修改步骤及代码示例 #

要解决水平滚动卡片的等高问题，核心是利用Bootstrap的flex布局类，确保卡片容器、卡片本身、卡片内容区域都正确继承flex特性：

<!-- 外层滚动容器 -->
<div class="overflow-auto">
  <!-- 横向排列的卡片行，必须保留d-flex flex-row flex-nowrap -->
  <div class="d-flex flex-row flex-nowrap">
    <!-- 卡片1 -->
    <div class="card flex-fill m-2">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">卡片标题1</h5>
        <p class="card-text flex-grow-1">
          这里是较长的卡片内容示例，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <a href="#" class="btn btn-primary mt-auto">操作按钮</a>
      </div>
    </div>
    <!-- 卡片2 -->
    <div class="card flex-fill m-2">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">卡片标题2</h5>
        <p class="card-text flex-grow-1">短内容</p>
        <a href="#" class="btn btn-primary mt-auto">操作按钮</a>
      </div>
    </div>
    <!-- 可继续添加更多卡片 -->
  </div>
</div>

核心属性说明 #

• 滚动容器：仅保留overflow-auto即可，无需额外flex类，内部行容器负责横向排列
• 卡片行容器：d-flex flex-row flex-nowrap是核心，强制卡片横向排列且不换行，为等高提供基础
• 卡片元素：添加flex-fill类，让每个卡片在flex容器中自动分配宽度并继承容器高度
• 卡片内容区：card-body设置d-flex flex-column，让内容垂直分布；card-text加flex-grow-1填充剩余空间，确保按钮固定在底部，同时拉平所有卡片高度
• 底部按钮：mt-auto自动顶到卡片底部，强化等高视觉效果

备选自定义CSS方案（如果Bootstrap类不生效） #

如果上述类组合仍有问题，可补充自定义CSS强制控制：

/* 确保卡片不收缩，按比例分配宽度 */
.card {
  flex: 1 0 280px; /* 最后一个值为卡片最小宽度，可按需调整 */
}
/* 强制卡片内容区占满高度 */
.card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 让文本区域填充剩余空间 */
.card-text {
  flex-grow: 1;
}

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