Foundation for Apps框架上的大量空间框架基本框架

Question

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

我正在使用他们使用flexbox的新网格系统。 我'想'我正在正确地使用他们的系统。

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

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

背景方面：

首先，我添加网格块“行”并网内容“列”按照引导程序的想法，然后按照他们在基金会究竟说了应用程序的文档。但后来我意识到这看起来完全错了，因为每个div都是可滚动的并且聚集在一起。

内容块 - Grid - Foundation for Apps Docs

“如果基本块是基金会为应用程序布局的行，然后内容块列它们的尺寸和重新排序就像正常的块，但他们的目的是为了容纳实际的内容，而不仅仅是更多的块。“

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

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

Answer 1

与您的代码的主要问题是，里面用类主要页面的div元素的4个元素是他们每个人都有一个大小希望填满整个网格的类。

在父元素容器中，您可以将总共为12的元素分配给4 * 12（4个子div元素，每个元素具有小偏移量-1和小-11）。此外，您分配给父容器的垂直类使元素垂直拉伸，这就是为什么您可以看到所有间距。

我已经修改了你的例子此链接只给你另一种方法： https://jsbin.com/falojitalu/edit?html,css,output