如何使用引导网格

时间:2016-05-17 15:47:10

标签: jquery twitter-bootstrap-3 jquery-plugins zurb-foundation

我正在尝试实现类似的堆栈:

http://homedepot.ca

他们是否使用jQuery扩展来实现该布局的效果,如果是,哪一个?来源的快速高峰并没有告诉我太多......

看起来他们可能正在使用Zurb的Foundation而不是我最初假设的Bootstrap。也许是一个叫做花岗岩的jQuery库?

我希望最左边的列能够假设它的所有垂直和水平空间,而较小的右列则会有2或3行更小的图像。

我需要每个单元格假设它的最大宽度和高度基本上保持响应并在较小的设备上垂直折叠。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

他们基本上使用了带有嵌套行的Bootstrap这样的东西。 http://www.bootply.com/OCSQsH71zp

<div class="container">
<div class="row">
  <div class="col-md-8">Something</div>
  <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">Something</div>
            <div class="col-md-12">Something</div>    
         </div> 
  </div>  
  </div>
</div>

您有两个初始列。在右列中,添加另一行,其中两列各自跨越整个宽度。