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>