Question

我试图了解这些类如何在大屏幕上显示四列，而在移动设备上显示一列。以及如何使它在移动屏幕上成为两列。我阅读了文档，但对我来说仍然没有意义

 <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3  my-3">

Answer 1

如果该行仅包含ProductWrapper，则该列为一列，因为您使用了`col-9。

col-*类适用于从 xs 到 xl 的每个设备和视口。因此，如果要在小尺寸屏幕上显示2列，只需使用col-6。

现在，由于您使用的是col-6，因此请删除col-md-6。如上所述，col-*适用于所有屏幕尺寸，而不管其宽度如何。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col-6 col-lg-3  mx-auto my-3 p-5 bg-primary">

    </div>
    <div class="col-6 col-lg-3  mx-auto my-3 p-5 bg-danger">

    </div>
  </div>
</div>

如果列的总和为12，则无需使用mx-auto。

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container mt-5">
    <div class="row">
      <div class="col-6 col-lg-3 my-3 p-5 bg-primary">

      </div>
      <div class="col-6 col-lg-3  my-3 p-5 bg-danger">

      </div>
      <div class="col-6 col-lg-3  my-3 p-5 bg-primary">

      </div>
      <div class="col-6 col-lg-3  my-3 p-5 bg-danger">

      </div>
    </div>
  </div>

仅供参考：引导程序4已删除col-xs-*类，而推荐使用col-*类。因此，请使用col-*代替col-xs-*

更新

Bootstrap网格基于12列。也就是说，一行仅包含12列，而且无论视口如何，这些列都会堆叠在一起。

如果要连续有12列，请使用12 col-1。如果要具有4个相同大小的列，请使用 4 col-3 ，因为 4*3 = 12 。同样，如果要具有 2 个相同大小的列，请使用 2 col-6

有关更多信息，请访问Bootstrap grid examples

有人可以说明这些引导程序类如何工作

1 个答案:

更新