如何在bootstrap中制作这样的布局？

Question

我有三列5-5-2，它应该是相同的高度但是中间列有两行，第一行是单列，第二行有两列

＆＃13;

＆＃13;

<div class="container">
  <div class="row equal">
    <div class="col-xs-12 col-sm-5">
      <figure>
        <img class="img-responsive" src="http://placehold.it/300x300" alt="">    
      </figure>
    </div>
    <div class="col-xs-12 col-sm-5">
      <div class="row">
        <div class=" col-sm-12">
          <figure>
            <img class="img-responsive" src="http://placehold.it/300x150" alt="">    
          </figure>
        </div>
      </div>
      <div class="row">
        <div class=" col-sm-6">
          <figure>
            <img class="img-responsive" src="http://placehold.it/300x300" alt="">
          </figure>
        </div>
        <div class="col-sm-6">
          <figure>
            <img class="img-responsive" src="http://placehold.it/300x300" alt="">
          </figure>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-2">
      <figure>
        <img class="img-responsive" src="http://placehold.it/300x600" alt="">
      </figure>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用bootstrap并设置img大小。 这是代码：

root = this;
this.root = root;
console.log('heroController', root);