Bootstrap 4：Card deck下实现不同尺寸卡片等高的标准方案问询

这确实是Bootstrap卡片布局里常见的小困扰，我平时做项目也踩过类似的坑，给你几个标准又简便的解决方案：

方案一：用row-cols + h-100（最推荐，无自定义样式） #

Bootstrap的row-cols类可以轻松控制每行的列数，配合h-100让卡片撑满父容器高度，再用g-*类统一控制列间距，完美解决双重间距和等高问题：

<div class="row row-cols-1 row-cols-md-2 g-4">
  <!-- 第一张卡片占col-6（中等屏幕以上） -->
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">第一张卡片</h5>
        <p class="card-text">这里可以放较长的内容，卡片会自动和右侧等高</p>
      </div>
    </div>
  </div>
  <!-- 第二张卡片 -->
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">第二张卡片</h5>
        <p class="card-text">短内容</p>
      </div>
    </div>
  </div>
</div>

• row-cols-md-2：在中等屏幕（≥768px）以上每行显示2列，对应你要的col-6宽度；小屏幕自动堆叠成1列
• h-100：让卡片高度占满父级.col的高度，实现等高
• g-4：统一设置列之间的间距（替代.col默认padding和.card默认margin的冲突，避免双重间距）

方案二：自定义样式适配card-deck #

如果你坚持要用card-deck，可以通过自定义CSS覆盖flex属性，同时调整间距：

<div class="card-deck">
  <div class="card col-6-custom">
    <div class="card-body">
      <h5 class="card-title">第一张卡片</h5>
      <p class="card-text">自定义宽度的卡片</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">第二张卡片</h5>
      <p class="card-text">自适应宽度的卡片</p>
    </div>
  </div>
</div>

对应的CSS：

/* 给卡片设置固定宽度，对应col-6的50%宽度 */
.col-6-custom {
  flex: 0 0 50%;
  max-width: 50%;
}
/* 调整card-deck的间距，避免和card的margin冲突 */
.card-deck .card {
  margin-right: 1.5rem;
  margin-left: 0;
}
.card-deck .card:last-child {
  margin-right: 0;
}

这个方案需要自定义样式，不如方案一简洁，但能满足你用card-deck的需求。

为什么你的方法会失效？ #

• 直接给.card加col-6：因为.card-deck > .card默认设置了flex: 1 0 0%，这个flex属性会覆盖col-6的宽度设置，所以卡片还是会自适应宽度
• 把卡片放.col里：.col自带左右padding，.card自带margin，两者叠加就会出现不规则的双重间距，而用row的g-*类可以统一控制间距，避免这个问题

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