html - Bootstrap 5.0 列数偶数 (4-2-1)

Question

我正在尝试为我的引导行设置一个偶数列 4 或 2 或 1。
实际上，当我调整浏览器的宽度时，列数从 4 开始，然后是 3、2，最后是 1。
有一种将列数从 4 调整为 2 而不传递到 3 的方法？

 ...
  <div class="row row-cols-2">
      <div class="col-sm">
        ...
      </div>
      <div class="col-sm">
        ...
      </div>
      <div class="col-sm">
        ...
      </div>
      <div class="col-sm">
        ...
      </div>
  </div>
 ...

谢谢！

标签： htmlbootstrap-5

Answer 1

是的，只需使用row-cols-*响应式..

   <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
        <div class="col"> ... </div>
        <div class="col"> ... </div>
        <div class="col"> ... </div>
        <div class="col"> ... </div>
   </div>

演示