Css 引导4方形网格

我想用Bootstrap 4创建一个正方形响应网格，为此，我做了如下一行：

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

但这只会创建一行，每列的高度与视口相同

这个解决方案以前是有效的，但我认为它打破了Bootstrap4FlexBox

---

有什么想法吗？

你能试着用class=w-100吗

Bootstrap官方网站上给出的示例

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

…应用等于父级宽度的填充值。父宽度为。行宽度。如果有5个元素，则需要应用填充底部：20%。如果他们是4，你需要填充底部：25%，等等

而且，请记住，如果希望列以响应方式换行，则需要调整每种情况的填充底部值

一个简单得多的方法是把你的方形物品放在盒子里。这样，它们将始终是相对于当前列宽的正方形：

.广场{ 垫底：100%； } .orange{背景色：橙色；} .orangered{背景色：orangered；} .gold{背景色：金色；} .darkorange{背景色：darkorange；}

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

padding-bottom: 100%