1

我想创建一个类似于此示例的 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 的底部对齐。

在此处输入图像描述

4

1 回答 1

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-->
于 2012-12-20T08:24:19.220 回答