html - bootstrap 4 中窗口宽度减小时如何包装容器以适合顶部容器下方？

Question

我是 bootstrap 4 的新手，也没有在 bootstrap 3 上做太多工作。

当我将类 col-(breakpoint)-(span) 分配给 div(s) 时，它们不会自动排成一行或根据窗口的宽度进行调整，而是保持左对齐和堆叠在彼此之上。所以我将 CSS flex 属性分配给父容器，这样就可以了。

现在要根据窗口大小进行换行，我根据 bootstrap 4 网格系统分配类，但这不会使容器换行到下一行。相反， flex 元素的组合宽度超过了窗口的宽度，从而实现横向(x 轴)滚动。

我想要的是前两个容器保留在一行中，最后两个容器在较小的屏幕宽度(手机纵向，<576px)上换行到另一行。

 <div style="display:flex;">
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
    <div class="col-sm-3 col-6"></div>
 </div>

我哪里错了？

Answer 1

使用所有必要的网格类，请参阅文档 https://getbootstrap.com/docs/4.0/layout/grid/

您必须将所有列包装在行中并将行包装在容器中(.container 或 .container-fluid)

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-6">x</div>
    <div class="col-sm-3 col-6">y</div>
    <div class="col-sm-3 col-6">z</div>
    <div class="col-sm-3 col-6">a</div>
  </div>
</div>