如何让Bootstrap 4卡片卡组（card deck）每行宽度一致？

嘿，我完全懂你遇到的麻烦——用card deck布局时，满4张卡片的行宽度正常，但卡片数量少的行里卡片会被莫名拉伸变形，想让所有卡组的卡片宽度都统一对吧？我给你两个实用的解决方案：

方案1：自定义Flexbox布局（推荐） #

放弃Bootstrap默认的card-deck逻辑，自己用flexbox精准控制卡片宽度，不管卡组里有1张还是4张卡片，宽度都不会变形：

HTML结构 #

<div class="custom-card-group">
  <div class="card">
    <img src="你的图片地址" class="card-img-top" alt="卡片图片">
    <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <p class="card-text">卡片内容描述...</p>
    </div>
  </div>
  <!-- 这里可以自由放置1-4张卡片 -->
</div>

CSS样式 #

.custom-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 卡片之间的间距，可根据需求调整大小 */
}

.custom-card-group .card {
  /* 固定每张卡片宽度，4张刚好占满一行（减去gap的分摊值） */
  flex: 0 0 calc(25% - 0.75rem);
  max-width: calc(25% - 0.75rem);
}

/* 响应式适配：中等屏幕每行显示2张卡片 */
@media (max-width: 991px) {
  .custom-card-group .card {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}

/* 响应式适配：小屏幕每行显示1张卡片 */
@media (max-width: 575px) {
  .custom-card-group .card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

这里的核心是flex: 0 0 宽度值——0 0表示卡片不拉伸也不收缩，牢牢固定住宽度，完美解决少卡片时的变形问题。

方案2：修改原生Bootstrap Card Deck样式 #

如果不想改动HTML结构，只想调整现有card-deck的CSS：

.card-deck {
  display: flex;
  flex-wrap: wrap;
  /* 保留原生左右margin，用来抵消卡片的margin */
  margin-right: -15px;
  margin-left: -15px;
}

.card-deck .card {
  /* 覆盖原生的flex:1属性，强制固定宽度 */
  flex: 0 0 calc(25% - 30px);
  max-width: calc(25% - 30px);
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 1rem;
}

/* 同样加上响应式适配 */
@media (max-width: 991px) {
  .card-deck .card {
    flex: 0 0 calc(50% - 30px);
    max-width: calc(50% - 30px);
  }
}

@media (max-width: 575px) {
  .card-deck .card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

额外优化：统一卡片高度 #

如果你的卡片内容高度不一致，还可以加这段CSS让所有卡片高度统一，视觉更整齐：

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1; /* 让卡片主体部分填充剩余空间，自动撑高卡片 */
}

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