Bootstrap：堆栈行

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>