Zurb Foundation：块网格刷新答案

【问题标题】：Zurb Foundation: Block Grid refreshZurb Foundation：块网格刷新
【发布时间】：2015-04-27 18:11:50
【问题描述】：

假设我在 Foundation "Block Grid" 中有 10 个块（这些块由块网格等距间隔），分为 3 列。这给了我 3 行 3 块和 1 行单个块。

如果我动态添加一个带有display:none 的类，比如说，第一个块，我将得到的仍然是相同的 4 行，其中一个孔代替块号 1。

有没有办法强制它重新排列块，就好像它最初从 9 开始一样，你会得到 3 行，每行 3 个块？

编辑：

在我最初的帖子之后不久，我突然想到要进行一个测试，它看起来像 Block Grid 中的一个错误：我在 UL 中的一个 LI 中包含了一个 display:none 类，该 LI 由 HTML 代码中的 Block Grid 控制从一开始就确定不应该显示的块会影响布局！

Foundation 似乎计算了在 UL 中编码的 LI，而不考虑它们的显示属性。在上面的示例中，如果我将第一个块 (LI) 设置为 display:none，我仍然会得到 4 行，第一行只显示 2 个块！

【问题讨论】：

目前实现这一目标的唯一方法是完全删除li:codeply.com/go/qiZ4JZYSRk
@Skelly，感谢您的建议，但在我的情况下，这不是一个选项，因为我需要稍后在需要时显示元素并且从 DOM 中删除它们是行不通的。但是，我从您对 jQuery remove() 和 detach() 的输入中了解到，这是我以前不知道的！

【解决方案1】：

经过进一步搜索，我发现 Foundation 将 clear:both 应用于 Block Grid 中的所有第 n+1 个元素，而不管元素的可见性如何。但是，如果网格中的所有元素大小相同，则清除不会改变任何内容。

就我而言，幸运的是，所有元素的大小都相同，因此通过从 CSS 中删除 clear:both（或用 clear:none !important; 覆盖它）解决了我的情况。但是，如果元素大小不同，这不是解决方案。我还发现了this，这实际上是同一个问题。

【讨论】：