首页 文章

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

提问于
浏览 次
-1

我是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>

我哪里错了？

html css twitter-bootstrap flexbox bootstrap-4

2 回答

  • 0

    使用所有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>
    回复于
  • 1

    试试这个删除包含flex的样式属性，然后添加一个class =“row”，对于子div，用这个类替换类=“col-lg-3 col-md-3 col-6”

    回复于

相关问题