Question

我目前设置了Bootstrap 4（beta）网格，在＆gt; sm屏幕上显示3个图标，然后显示2个图标，在xs屏幕上显示为2x2x1。

我通过标记每一列来实现这一目标。但是，有没有办法让每个列col-sm-3（我希望它们更小）并强制剩余的图标在新行上，但也让它们在xs屏幕上堆叠2x2x1？

我有什么：

＆＃13;

<div id="Customers" class = "container-fluid customersBlock">
  <div class = "row justify-content-center">
    <div class = "col-sm-4 col-6">
          IMG 1
    </div>
    <div class = "col-sm-4 col-6"">
         IMG 2
    </div>
    <div class = "col-sm-4 col-6">
          IMG 3
    </div>
  <div class = "col-sm-4 col-6">
         IMG 4
    </div>
    <div class = "col-sm-4 col-6">
         IMG 5
    </div>
</div>
</div>

＆＃13;

我想要什么：

＆＃13;

<div id="Customers" class = "container-fluid customersBlock">
  <div class = "row justify-content-center">
    <div class = "col-sm-3 col-6">
          IMG 1
    </div>
    <div class = "col-sm-3 col-6"">
         IMG 2
    </div>
    <div class = "col-sm-3 col-6">
          IMG 3
    </div>

~~ Some way to force columns to next line on >small screens
But on XS Screens still have them stack 2x2x1 ~~

  <div class = "col-sm-3 col-6">
         IMG 4
    </div>
    <div class = "col-sm-3 col-6">
         IMG 5
    </div>
</div>
</div>

＆＃13;

在较小的屏幕引导4上响应网格中断

0 个答案: