如何使用媒体查询更改 Bootstrap 行中的卡片数量？

Question

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12" *ngFor="let card of cards">

此 div 包含网页上显示的卡片。目前，当屏幕尺寸为 XL 时，将显示 4 张卡片，大 3、中 2、小 1。

现在假设我处于最大的屏幕尺寸并开始拖动窗口以使其变小，一切正常，但是，当接近 XL 屏幕尺寸的末尾时，卡片开始水平重叠。在出示 3 张牌和出示 2 张牌之间也会发生这种情况。

我使用@media选择器定位了重叠的区域，并将背景颜色设置为红色以进行测试。这就是它的样子：

  @media (min-width: 1200px) and (max-width: 1450px) {
      background-color: red; // Test if this is applied
  }
  
  @media (min-width: 990px) and (max-width: 1050px) {
    background-color: red;           
  }

我的问题是我可以做什么来调整显示的卡片数量，以便在第一个 @media 标签中显示 3 张而不是 4 张卡片。

对于第二个 @media 标签，我该怎么做才能显示 2 张而不是 3 张卡片。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <!-- card markup here, please -->
    </div>
  </div>
</div>

Answer 1

更改 col-xl-3 ---> col-xl-4 = 3 列

更改 col-lg-4 ---> col-lg-6 = 2 列

引导网格有十二列宽。

col-size-x 将显示 12/x 卡。

请勿更改媒体查询！