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>

但我不希望将宽度和高度设置为 100 像素，而是希望大小具有响应性，这样我就可以用网格填充整个页面并在项目之间保持较小的边距。

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

我想这可以用 Bootstrap 4 中的 flexbox 来完成，但我在文档中没有找到任何示例。

Answer 1

我认为您可以从该页面内容中获得解决方案。

How can I make Bootstrap columns all the same height?