我正在尝试创建一个响应式页面,其中正方形占全宽的 50%(每行 2 个正方形)。在移动设备(包括 iPhone 6/7 Plus)上,这些方 block 应该是一个在另一个下面,但它不适用于以下代码:
.square {
width: 100vw;
height: 100vw;
float: left;
}
@media (min-width: 1170px) {
.square {width: 50vw; height: 50vw; }
}
理想情况下,我会使用 Bootstrap,但我不知道如何创建正方形。
最佳答案
Bootstrap 示例:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="square"></div>
</div>
<div class="col-lg-6">
<div class="square"></div>
</div>
</div>
</div>
CSS:
.square {
height: 0;
padding-bottom: 100%;
background-color: green;
}
关于twitter-bootstrap - CSS 中的响应式 2 列正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43242239/