Bootstrap 4中的正方形网格

Question

如何在Bootstrap 4中创建正方形的响应网格？

我知道我可以创建一个网格

<div class="row"> 
    <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> 
    <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> 
    <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> 
    <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> 
</div> 

但不是宽度和高度设置为100px，我要的大小来响应这样我就可以填写与电网的整个页面，并保持项目之间的小余量。

所以我想我需要定义项目的最小和最大尺寸，这样我可以使网格定义每页上的最佳项目数。

我猜可以在Bootstrap 4中使用flexbox来完成，但我在文档中找不到任何示例。

Answer 1

我认为你可以从这个页面的内容有一个解决方案。

How can I make Bootstrap columns all the same height?