在 ZURB Foundation 6 中，有没有办法让列围绕隐藏列流动？

Question

使用 ZURB Foundation 6，有没有办法让列围绕隐藏列流动？

所以对于这段代码：

<ul class="row large-up-3">
    <li class="column column-block large-4" style="display:none;">1</li>
    <li class="column column-block large-4">2</li>
    <li class="column column-block large-4">3</li>
    <li class="column column-block large-4">4</li>
    <li class="column column-block large-4">5</li>
    <li class="column column-block large-4">6</li>
</ul>

目前显示如下：

2  3
4  5  6

但我希望实现的是：

2  3  4
5  6

这样可行吗？

如果有其他方法，我不需要使用 "display: hidden"。那只是占位符 CSS 代码。

如果没有，有没有办法在 Bootstrap 中执行此操作或编写我自己的网格 CSS？如果需要，我可以绕过 Foundation 以获得此特定内容。

感谢您的帮助！

Answer 1

想通了。在 Foundation 6 中，以下 CSS 代码强制每行重新开始：

.large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
    clear: both;
}

注意：我使用的是 3-3 列的行，因此您的代码会有所不同，具体取决于每行的列数。

因此，如果您将 clear:both 更改为 clear:none，您可以使用 display:none 隐藏列，这些列将自动填充任何空白。

ZURB 为什么要这样做？

好吧，如果您更改此 CSS 代码，您会发现由于列高不同，您的列不再垂直排列。

所以这个 CSS 代码强制一切看起来不错。

如果删除 clear:both 代码然后运行出现对齐问题，您可能会查看 ZURB 的 "equalizer" 代码以将所有列设置为相同的高度。

https://get.foundation/sites/docs/equalizer.html

如果相同的列高最终在您的主题中看起来不正确，有多种方法可以进一步美化事物，例如使用 CSS 溢出选项，但这超出了这个问题的范围。

我希望这对某人有所帮助！

在 ZURB Foundation 6 中，有没有办法让列围绕隐藏列流动？

In ZURB Foundation 6, is there a way to have columns flow around a hidden column?

zurb-foundation