Question

当没有足够的空间将它们显示在一行中时，有没有办法在多行中堆叠不同数量的div？

所以我的意思是，想象你有20个div，但只有5个适合第一行。然后应该有4行，5个项目。另一方面，当我们只有3个项目时，应该只有一行有3个项目。

Answer 1

Flexbox让这一切变得简单。看看here。

Answer 2

Bootstrap每行有12列。您可以嵌套列/行，但不建议您嵌套容器。

话虽如此，每行最多可以有12列。要控制它的“堆叠”方式，您需要对它所属的列类型进行分类。看演示。

https://codepen.io/pkshreeman/pen/LLYZqm

调整窗口大小，您将看到它对不同设置的作用。

希望这有帮助。

这是演示中使用的代码：

<div class="container">
  <div class="row">
    <div class="col-md-6"> col-md-6 </div>
    <div class="col-md-6"> col-md-6 </div> 
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
    <div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div> 
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
    <div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div> 
  </div>
  <div class="row">
    <div class="col-md-4 col-sm-6">col-md-4 col-sm-6
    </div>
    <div class="col-md-4 col-sm-6">col-md-4 col-sm-6
    </div>
    <div class="col-md-4 col-sm-6">col-md-4 col-sm-6
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 col-sm-2">col-md-4 col-sm-2
    </div>
    <div class="col-md-4 col-sm-2">col-md-4 col-sm-2
    </div>
   <div class="col-md-4 col-sm-2">col-md-4 col-sm-2
    </div>
  </div>
</div>

Bootstrap：堆叠div行

2 个答案: