如何用媒体查询调整Bootstrap行内卡片数量？解决重叠问题

问题说明 #

基于Bootstrap 4栅格系统实现卡片列表，卡片容器类为col-xl-3 col-lg-4 col-md-6 col-sm-12，对应显示规则：

• XL屏（≥1200px）：4张/行
• LG屏（≥992px）：3张/行
• MD屏（≥768px）：2张/行
• SM及以下屏：1张/行

窗口缩小至以下两个区间时，卡片出现水平重叠：

• 1200px ≤ 宽度 ≤ 1450px（接近XL屏下限）
• 990px ≤ 宽度 ≤ 1050px（LG转MD的过渡区间）

已通过@media选择器定位这两个区间并做红色背景测试，需求是在第一个区间将显示数从4张改为3张，第二个区间从3张改为2张。

现有代码 #

卡片循环代码（Angular） #

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12" *ngFor="let card of cards">
  <!-- 卡片内容 -->
</div>

测试用@media规则 #

@media (min-width: 1200px) and (max-width: 1450px) {
  background-color: red; /* 测试区间是否生效 */
}

@media (min-width: 990px) and (max-width: 1050px) {
  background-color: red; /* 测试区间是否生效 */
}

基础布局示例 #

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <!-- 卡片内容 -->
    </div>
  </div>
</div>

解决方案 #

步骤1：给卡片容器添加自定义类 #

为了精准选择卡片元素，避免影响其他栅格布局，给卡片div添加自定义类（比如card-item）：

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 card-item" *ngFor="let card of cards">
  <!-- 卡片内容 -->
</div>

步骤2：编写@media规则覆盖卡片宽度 #

利用Bootstrap栅格的flex布局特性，在目标区间修改卡片的flex-basis和max-width，实现显示数量调整：

/* 1200px-1450px区间：4张改3张（每张占1/3宽度） */
@media (min-width: 1200px) and (max-width: 1450px) {
  .row > .card-item {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    /* 可保留红色背景测试，确认生效后删除 */
    background-color: red;
  }
}

/* 990px-1050px区间：3张改2张（每张占1/2宽度） */
@media (min-width: 990px) and (max-width: 1050px) {
  .row > .card-item {
    flex: 0 0 50%;
    max-width: 50%;
    /* 可保留红色背景测试，确认生效后删除 */
    background-color: red;
  }
}

原理说明 #

Bootstrap的栅格列类（如col-xl-3）本质是通过flex: 0 0 25%和max-width:25%实现4张/行的布局。我们通过@media规则在特定区间覆盖这些属性，将宽度调整为33.33%（3张/行）或50%（2张/行），从而解决卡片重叠问题。

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