时间戳

首页 > 解决方案 > 在 ZURB Foundation 6 中，有没有办法让列围绕隐藏列流动？

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

问题描述

使用 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

这可行吗？

如果有其他方法可以做到这一点，我不需要使用“显示：隐藏”。那只是占位符 CSS 代码。

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

感谢您的任何帮助！

标签： zurb-foundation

解决方案

弄清楚了。在 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 的“均衡器”代码以将所有列设置为相等的高度。

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

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

我希望这可以帮助别人！

推荐阅读