Twitter Bootstrap 2 列图像网格答案

【问题标题】：Twitter Bootstrap 2 column Image GridTwitter Bootstrap 2 列图像网格
【发布时间】：2012-12-07 14:53:07
【问题描述】：

我想创建一个类似于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>

span4 的第一行完全对齐，但是如图所示，后两行中 span4 的底部并未与 span8 的底部对齐。

【问题讨论】：

显示你迄今为止尝试过的内容
-1 如果您能展示您目前所做的工作，您将获得更多帮助。

标签： html css twitter-bootstrap

【解决方案1】：

好吧，似乎阅读引导程序中的嵌套列会帮助您解决这一问题，您想要实现的目标相对简单，只是需要时间来弄清楚

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-->

【讨论】：