1

我正在尝试使用 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 个项目的“偶数”行。在 Bootply 上查看演示。

Bootstrap 有开箱即用的方法，还是我需要自定义视口计算来获得这种布局？

4

3 回答 3

1

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

这样可以连续显示 4 个项目，或者如果您将窗口缩小到某个点，则仅显示一个。它永远不会连续做 3 个项目。

于 2013-05-03T23:46:52.743 回答
0

为什么不把代码中间的部分去掉，让浏览器处理布局呢？这将允许您的物品正确堆叠，您还可以指定最小宽度以确保您不会变得太小。

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

于 2013-05-05T23:07:24.457 回答
0

像 Vijay Ramamurthy 说的那样，将行的类别更改为 row-fluid 。

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

于 2013-05-05T23:32:26.177 回答