我想用 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>
我正在设置col类具有以下规则：
.col {
padding-top: 100%;
}
但这只会创建一行，每一列的高度都是视口的高度。
这个解决方案以前可以工作，但我认为它破坏了 Bootstrap 4 Flexbox。
有任何想法吗？
padding-bottom: 100%
...应用等于父级的填充值width。父级宽度为.rows 宽度。如果您有5个要素，则需要申请padding-bottom: 20%。如果他们是 4，你需要padding-bottom: 25%, etc...
并且，请记住，如果您希望列能够响应式换行，则需要进行调整padding-bottom每种情况的值。
一种更简单的方法是将方形物品放入cols。这样它们将始终是相对于当前列宽度的正方形：
.square {
padding-bottom: 100%;
}
.orange {background-color: orange;}
.orangered {background-color: orangered;}
.gold {background-color: gold;}
.darkorange {background-color: darkorange;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col"><div class="square orange"></div></div>
<div class="col"><div class="square orangered"></div></div>
<div class="col"><div class="square gold"></div></div>
<div class="col"><div class="square darkorange"></div></div>
<div class="col"><div class="square orangered"></div></div>
</div>
</div>
现在，您可以安全地将响应类添加到列中，相对于当前列宽度，正方形将保持正方形。
-
Note我还添加了
no-gutters上课到row删除col左/右填充值。
- Change
container to container-fluid如果您希望容器具有完整的页面宽度。
Bonus: 如何将内容放入预先确定大小的组件中:
上述解决方案给您留下了下一个问题：正方形的大小仅取决于填充值。如果你添加任何流量内容，它就会变得更大。解决方案是将内容放在文档流之外，如下所示：
.square {
padding-bottom: 100%;
position: relative;
height: 0;
}
.square>div {
position: absolute;
height: 100%;
overflow-y: auto;
padding: 1rem;
}
.orange {
background-color: orange;
}
.orangered {
background-color: orangered;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col">
<div class="square orange">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam at. Ultricies tristique nulla aliquet enim tortor at. In egestas erat imperdiet sed euismod. Placerat orci nulla pellentesque dignissim enim sit. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Felis eget nunc lobortis mattis aliquam faucibus. Aliquet porttitor lacus luctus accumsan. Amet risus nullam eget felis eget nunc lobortis mattis. Tortor consequat id porta nibh venenatis cras sed.
<p>Suspendisse sed nisi lacus sed viverra tellus in. Tellus cras adipiscing enim eu. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus orci ac auctor augue mauris augue neque gravida in. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Et pharetra pharetra massa massa ultricies. Facilisis sed odio morbi quis. Felis eget velit aliquet sagittis id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Facilisis leo vel fringilla est. Quam adipiscing vitae proin sagittis. Mi tempus imperdiet nulla malesuada. Eget arcu dictum varius duis. In eu mi bibendum neque egestas congue quisque egestas. Ut tristique et egestas quis ipsum suspendisse ultrices. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Aliquam faucibus purus in massa tempor nec. Amet luctus venenatis lectus magna fringilla.
<p>Est ullamcorper eget nulla facilisi etiam dignissim. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Pellentesque elit eget gravida cum sociis. Aliquam faucibus purus in massa tempor nec. Nisl vel pretium lectus quam id leo in vitae. Non consectetur a erat nam at lectus urna. Porttitor massa id neque aliquam vestibulum morbi. Non sodales neque sodales ut etiam sit amet nisl purus. Leo vel orci porta non pulvinar neque laoreet. Nisl nunc mi ipsum faucibus. Non consectetur a erat nam at lectus. Ac turpis egestas sed tempus urna et pharetra pharetra. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ipsum faucibus vitae aliquet nec ullamcorper sit. Egestas congue quisque egestas diam in. Sagittis eu volutpat odio facilisis mauris sit. Dui vivamus arcu felis bibendum ut tristique.
</div>
</div>
</div>
<div class="col">
<div class="square orangered">
<div>
<p>Tristique senectus et netus et malesuada fames. Semper feugiat nibh sed pulvinar proin gravida. Risus in hendrerit gravida rutrum quisque non. Elit ut aliquam purus sit amet luctus. Porttitor eget dolor morbi non arcu risus quis varius quam. Aliquam eleifend mi in nulla posuere. Venenatis tellus in metus vulputate. Lacinia at quis risus sed vulputate odio. Nisl nisi scelerisque eu ultrices. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Id cursus metus aliquam eleifend mi. Ac feugiat sed lectus vestibulum. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Bibendum neque egestas congue quisque egestas diam in arcu. Mauris in aliquam sem fringilla. Praesent tristique magna sit amet purus gravida quis blandit.
<p>Felis eget nunc lobortis mattis aliquam. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam quis enim lobortis scelerisque fermentum dui. At ultrices mi tempus imperdiet nulla malesuada. Amet volutpat consequat mauris nunc congue. Sit amet mattis vulputate enim nulla aliquet. Diam ut venenatis tellus in metus vulputate eu scelerisque. Quam elementum pulvinar etiam non quam. Id interdum velit laoreet id donec ultrices. Sit amet est placerat in egestas erat imperdiet sed. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Tristique senectus et netus et. Quis viverra nibh cras pulvinar mattis nunc. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Sed odio morbi quis commodo. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Sagittis vitae et leo duis ut diam quam nulla porttitor.
</div>
</div>
</div>
</div>
</div>
请注意，您应该只有一个立即数div每个中的子项（内容包装器）.square为了这个工作。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
