html - Zurb Foundation small-push also applying on large

Question

我正在使用 zurb foundation 并添加 small-push-1 但它也会影响大面板尺寸。

这是我的 div 结构:

<div class="expertise-panel large-5 medium-5 small-push-1 small-10 columns">
</div>

有没有人遇到过同样的问题..？

Answer 1

据我所知，您正在尝试将小列居中。而不是使用 small-push-1，我认为你应该使用 centered classes .

这会导致这样的结果:

<div class="expertise-panel small-10 small-centered medium-5 medium-uncentered columns">
</div>

另一种选择是使用 offset classes ，在这种情况下，您应该将“small-offset-1”和“medium-offset-0”添加到类属性中。

请注意，您会自动“继承”较小类的样式。不必写“large-5 medium-5”，因为 medium-5 和 large-5 都指定了 41.66667% 的宽度。所以如果不加large-5类，就用medium-width类。

此行为也适用于中等非中心类。因为我已经将 medium-uncentered 添加到 expertisepanel，large/xlarge/xxlarge 也会自动变为 uncentered。