Question

我是bootstrap 4的新手，并且还没有在bootstrap 3上工作过。

当我将一个类col-（断点） - （span）分配给div（s）时，它们不会自动排列成一行或根据窗口的宽度进行调整，而是保持左对齐并堆叠在一起。所以我将CSS flex 属性分配给父容器，这样就可以了。

现在根据窗口大小进行这些包装我根据bootstrap 4网格系统分配类，但这不会使容器换行到下一行。相反，flex-items的组合宽度超出了窗口的宽度，允许侧向（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

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

您必须将所有cols包装在容器（.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>

Answer 2

尝试此操作以删除包含flex的样式属性，然后添加class =＆＃34; row＆＃34;并且对于子div，用这个类替换类=＆＃34; col-lg-3 col-md-3 col-6＆＃34;

当bootstrap 4中的窗口宽度减小时，如何将容器包装到顶部容器下方？

2 个答案: