Question

我正在尝试使用Twitter Bootstrap创建响应式布局。有一个“网格”的图像（100x100），我想以1,2或4宽的行显示。我在“.container-fluid”中使用“.row”，然后使用span3来包含行内的每个项目。

<div class="container-fluid">
    <div class="row">
             <div class="span3 product"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>

             <div class="span3 product"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>
    </div>
    <div class="row">
             <div class="span3 product clearfix"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>

             <div class="span3 product"><img src="//placehold.it/100x100"></div>
             <div class="span3 product"><img src="//placehold.it/100x100"></div>
    </div> 
</div>

问题是当浏览器调整到一定宽度时，布局会不均匀地变化。例如，当视口在769px和795px之间时，我得到包含3个项目的行，以及包含1个项目的以下行。我宁愿拥有2或4个项目的“偶数”行。 See a demo on Bootply

开箱即用的Bootstrap是否有办法，或者我是否需要自定义视口计算才能获得此布局？

Answer 1

将.row div的类更改为.row-fluid。

这将使得连续显示4个项目，或者如果您缩小窗口超过某个点，则只有一个项目。连续3个项目永远不会做那件事。

Answer 2

为什么不直接删除代码中间的部分并让浏览器处理布局？这样可以正确堆叠物品，也可以指定最小宽度，以确保不会太小。

将您的平铺项目连续包裹意味着您的项目将始终在新行上创建一个中断，删除它将允许使布局不均匀的项目浮动在其他项目旁边。

Answer 3

将行类更改为行流体，就像Vijay Ramamurthy所说的那样。

或者根据需要使用同位素插件来适合您的图库：http://isotope.metafizzy.co/

Twitter Bootstrap布局在视口大小上均匀“包裹”

3 个答案: