Twitter Bootstrap 2列图像网格

Question

我想创建一个类似于此example的2列图像网格。 我正在寻找有关如何使用Twitter Bootstrap网格实现这一目标的建议？我试图做到这一点并没有取得多大成功。我的主要问题是图像之间的沟槽不均匀，无法对齐页面中心线上的图像，以及如何处理纵向和横向图像。提前致谢。

编辑：建议我提供了一个结果屏幕截图的示例。

 <div class="container">
  <div class="row">
    <div class="span12">
       <div class="row">
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
      </div>
      <div class="row">
        <div class="span8"><img src="http://goo.gl/mrllo"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
      </div>
      <div class="row">
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span8"><img src="http://goo.gl/mrllo"></div>
      </div>
    </div>
  </div>
</div>

第4行span4完全对齐，但是后两行中span4的底部没有与图8所示的span8底部对齐。

Answer 1

好吧好像读取bootstrap中的嵌套列会对你有所帮助，你想要实现的是相对简单的，只需要时间来弄明白

http://twitter.github.com/bootstrap/scaffolding.html#responsive

我尝试了这个并且它有效，但你需要将适当的图像放在它们的位置，因为它们都是不同的尺寸

      <div class="container">
   <div class="row">
    <div class="span8">
     <img src="http://example">
    </div>

    <div class="span4">
         <img src="http://example">
    </div>
   </div><!--row-->
      </div><!--container-->

     <div class="container">
  <div class="row">
   <div class="span6">
    <img src="http://example">
   </div>
     <div class="row">
      <div class="span6">
    <img src="http://example">
      </div>
    </div><!--row-->
     <div class="span6">
      <img src="http://example">
    </div>
          </div><!--row-->
        </div><!--container-->

        <div class="container">
     <div class="row">
      <div class="span9">
    <img src="http://example">
      </div>
    <div class="span3">
     <img src="http://example">
    </div>
    <div class="row">
     <div class="span3">
      <img src="http://example">
     </div>
    </div><!--row-->
           </div><!--row-->
          </div><!--container-->