Foundation for Apps 框架基本骨架上的大间距

Question

我正在使用 Foundation for Apps（而不是 Foundation for Sites），但我遇到了一个问题，即我的 div 上有很多空白。

我正在使用他们的新网格系统，它使用了 flexbox。 我“认为”我正确地使用了他们的系统。

为了帮助理解我所做的，我在 jsfiddle 中提供了代码：https://jsbin.com/nekubu/edit?html,css,output

有人能帮忙指出为什么会有这么多间距吗？ 我怀疑我以错误的方式使用这个网格系统，但是文档和示例不够广泛，无法获得与我相关的良好用例。

背景背景：

首先，我根据 Bootstrap 的想法为“行”添加了网格块，为“列”添加了网格内容，然后在 Foundation for Apps 文档中完全按照它们进行说明。但后来我意识到这看起来完全错了，因为每个 div 都是可滚动的并且聚集在一起。

内容块 - Grid - Foundation for Apps Docs

“如果基本块是 Foundation for Apps 布局的行，那么内容块就是列。它们可以像普通块一样调整大小和重新排序，但它们旨在容纳实际内容，而不仅仅是更多块。”

所以现在我有了你在这个 jsfiddle 中看到的代码。但是，现在有所有这些间距。我在 Firefox 和 Chrome 中测试过，都存在这个问题。

• 代码：https://jsbin.com/nekubu/edit?html,css,output
• 预览：https://jsbin.com/nekubu

Answer 1

您的代码的主要问题是，在具有 main-page 类的 div 元素中有 4 个元素，每个元素都有一个想要填满整个网格的大小调整类。

在父元素容器内，您可以拥有总计为 12 的元素并分配 4*12（4 个子 div 元素，每个元素具有 small-offset-1 和 small-11）。此外，您分配给父容器的垂直类使元素垂直拉伸，这就是您看到所有间距的原因。

我已将您的示例修改为此链接，只是为了给您另一种方法： https://jsbin.com/falojitalu/edit?html,css,output