如何在bootstrap布局的右侧制作一个高div？

Question

我觉得我在这里缺少一些简单的东西。 http://codepen.io/jpmckearin/pen/atdku/

这就是我所拥有的：

这就是我需要的：

代码:(见帖子顶部的codepen）

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="row">
        <div class="col-xs-6 sm-tile">a</div>
        <div class="col-xs-6 sm-tile">b</div>
        </div>
      <div class="row">
        <div class="col-xs-12 sm-tile">c</div>
      </div>
    </div>
    <div class="col-md-2 tile">d</div>
    <div class="col-md-6 tile">e</div>
    <div class="col-md-2 lg-tile">f</div>
    <div class="col-md-2 tile">g</div>
    <div class="col-md-8 tile">h</div>
    <div class="col-md-10 tile">i</div>
  </div>
</div>

[class*="col-"] {
  border: 1px solid red;
}

.sm-tile {
  height: 100px;
}

.lg-tile {
  height: 600px;
}

.tile {
  height: 200px;
}

Answer 1

这样的东西？

<div class="container">
  <div class='row'>
    <div class='col-md-10'>
      <div class="row">
        <div class="col-md-2">
          <div class="row">
            <div class="col-xs-6 sm-tile">a</div>
            <div class="col-xs-6 sm-tile">b</div>
          </div>
          <div class="row">
            <div class="col-xs-12 sm-tile">c</div>
          </div>
        </div>
        <div class="col-md-2 tile">d</div>
        <div class="col-md-8 tile">e</div>
      </div>
      <div class='row'>
        <div class="col-md-4 tile">g</div>
        <div class="col-md-8 tile">h</div>
      </div>
      <div class='row'>
        <div class="col-md-12 tile">i</div>
      </div>
    </div>
    <div class="col-md-2 lg-tile">f</div>
  </div>
</div>

此处提供了Plunker：http://plnkr.co/edit/ZfjhTHmecksaV3S2ImKh