html - Twitter Bootstrap 2 列图像网格

Question

我想创建一个类似于此的 2 列图像网格 example .我正在寻找有关如何使用 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>

span4 的第一行完全对齐，但是，后两行中 span4 的底部没有与 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-->