Javascript 引导-根据宽度调整元素的高度

我使用引导创建响应性布局。 这里是jsF

我有几个问题：

我尝试使用一个显然不起作用的脚本

如果我添加以下静态样式，我可以看到方块，但其中一些方块之间的空间太大，页面没有响应：

---

您只需使用css即可获得所需的结果，无需使用js

---

这是因为在css中，边距和填充百分比是相对于元素的宽度而不是高度设置的。因此，当您说padding top是56%时，这意味着元素宽度的56%。

为什么要同时使用jQuery和纯JavaScript。混淆正确吗？使用这个@synthet1c-仍然存在响应问题，看不到假定位于第2-3行末尾的双div，最后一行的位置错误，并且高度不等于宽度。此外，大正方形的大小太大。@saritRotshild您可以通过更改填充顶部百分比来更改长方体的高度。对于double，您只需为

.black.double{padding top:$doubleTheppadding}

，@synthet1c添加一个类-根据您的代码，正方形的大小不正确。I第一行的所有高度应与宽度相同，3个“大”sque应与第一行的高度相同

.black{background-color:black; float:left; width:100%;}
.black.double{height: 490px;}

.black {
  padding-top: 56%;
  width: 100%;
  position: relative;
}

.black > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}