html - 如何将 Bootstrap 行堆叠在另一行中？

Question

我有一个 Bootstrap 页面，我试图在该页面上堆叠不同的盒子。

Imgur - Image of boxes (sorry, not enough rep to upload images directly)

绿色方框是当前位置，红色方框是我遇到的问题。我正在使用以下代码(简化)来获取绿色框:-

<div class="container">
    <div class="row">
        <div class="col-xs-3" style="height:100px; background-color:green;">
        </div>

        <div class="col-xs-3" style="height:100px; background-color:green;">
        </div>

        <div class="col-xs-6" style="height:200px; background-color:green;">
        </div>
    </div>
</div>

我基本上是在尝试创建另外两个 <div class="col-xs-3" style="height:100px; background-color:green;">它将位于当前两个下方，同时还将大框保持在右侧。

我认为使用新行或使用 float:left / right 会很容易解决问题, 但这些似乎都没有奏效。

Answer 1

一种方法是制作两个宽度为 50% 的列，然后将右侧的列分成两行，每行再增加两列:

.green-lrg {
  background-color:green;
  height:215px;
}
.green-sml {
  background-color:green;
  height:100px;
}
.red-sml {
  background-color:red;
  height:100px;
}
.col-xs-6 .row {
  padding-top:15px;
}
  .col-xs-6 .row:first-child {
    padding-top:0;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <!-- LEFT COLUMN -->
        <div class="col-xs-6">
          <div class="green-lrg"></div>
        </div>

        <!-- RIGHT COLUMN -->
        <div class="col-xs-6">
          <div class="row">
            <div class="col-xs-6">
              <div class="green-sml"></div>
            </div>
            <div class="col-xs-6">
              <div class="green-sml"></div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              <div class="red-sml"></div>
            </div>
            <div class="col-xs-6">
              <div class="red-sml"></div>
            </div>
          </div>
        </div>
    </div>
</div>