twitter-bootstrap - CSS 中的响应式 2 列正方形

Question

我正在尝试创建一个响应式页面，其中正方形占全宽的 50%(每行 2 个正方形)。在移动设备(包括 iPhone 6/7 Plus)上，这些方 block 应该是一个在另一个下面，但它不适用于以下代码:

.square {
  width: 100vw;
  height: 100vw;
  float: left;
}

@media (min-width: 1170px) {
  .square {width: 50vw; height: 50vw; }
}

理想情况下，我会使用 Bootstrap，但我不知道如何创建正方形。

Answer 1

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;
}

http://codepen.io/Deka87/pen/yMrmKK