我一直在使用 Zurb Foundation 来评估它是否适合我的下一个项目。我在调整浏览器的宽度时偶然发现了一个我不习惯的特性，所以我想确认是否有任何方法可以做到这一点。
假设我有一个网格，每行有四个图像（“列”）。当我缩小浏览器窗口的宽度时，我的自然期望是图像数量会缩小到前三个，然后是两个，最后是每行一个图像，因为宽度减小。
相反，Foundation 似乎做的是尽可能地缩小 div，以保持每行四列，并且由于空间不足而无法容纳四列，它直接跳到每行一张图像。
这种行为对我来说是不合逻辑的，所以我认为一定有办法做到这一点，但是通过 http://foundation.zurb.com/docs/grid.php 我无法找到使用 div 或块网格的方法。
我有点假设这将是响应式网格的 101 个功能，但我对这些 css 框架没有太多经验。那么我是否必须开始编写自己的媒体查询来实现每行列数逐渐减少？
谢谢！
【问题讨论】：
标签： responsive-design zurb-foundation
我也遇到了同样的问题，这就是我找到这个条目的方式。 我知道这已经得到解答并解决了，但我只想分享我的答案。 块网格对我有用。 http://foundation.zurb.com/docs/components/block_grid.html 请参阅高级部分
在我的 HTML 中，我只是添加了类来指定在不同屏幕尺寸上每行需要多少个项目，如下所示：
<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<li>
<img src="images/sample1.jpg" width="640" height="480">
</li>
<li>
...
</li>
</ul>
在这里，我希望每行在小型设备中显示 1 个项目，在中型设备中显示 2 个项目，在大型设备中显示 3 个项目。我在 _app.scss 中启用了“基础/组件/块网格”。它奏效了！ :)
【讨论】：
Foundation 不会强制内容具有响应性或流畅性，但网格本身就是。它会向下流动到 12 列网格塌陷到移动网格的某个点。 （假设默认网格设置）
但是，您只需让所有图像在列中左侧浮动即可获得所需的行为。
喜欢：
img {float:left; width:24%;}
然后尝试添加最小和最大宽度以满足您的需求。
img {float:left; width:24%; min-width:100px; max-width:300px;}
【讨论】：