Bootstrap多列布局

Question

我必须使用bootstarp构建与下面相同的布局。

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-64 col-lg-42">
        <img class="img-responsive" src="<%= asset_path( 'Thunderbolt-Display_3-5.jpg' ) %>">
      </div>
      <div class="col-xs-64 col-lg-22">
        <div class="row">
          <div class="col-xs-64">
            <img class="img-responsive" src="<%= asset_path( 'Thunderbolt-Display_3-5.jpg' ) %>">
          </div>
          <div class="col-xs-64 child-of-prmo-p2">
            <img class="img-responsive" src="<%= asset_path( 'Thunderbolt-Display_3-5.jpg' ) %>">
          </div>
        </div>
      </div> 
    </div>  
  </div>

说明

第一张大图片将在lg设备上占据42列，第二张将占据22列。我实现了相同的布局，但我的问题是按照设计将空间置于图像之间。我也把间距也放了，但是在调整它的时候不正常。

正在使用的图像是5：3宽高比。

Answer 1

在div中使用较少的列，并尝试使用一列或两列来填充空格。