Twitter Bootstrap 2栏图像网格

我想创建一个类似于这个例子的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的底部对齐，如图所示。

---

好吧，看起来像在引导中嵌套列将帮助你在这一个，你试图实现的是相对简单，只需要时间来弄清楚

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

链接地址: http://www.djcxy.com/p/88319.html

上一篇: Twitter Bootstrap 2 column Image Grid

下一篇: How to create fluid semantical layout with Twitter Bootstrap using LESS?