html - Foundation .hide-for-small 意外行为

Question

我正在为我的网站制作一些模型原型，并决定使用 Foundation。Foundation 有一个功能，可以让您在视口小于 768 像素时轻松隐藏页面元素。奇怪的是，当我将 .hide-for-small 类应用于一个元素时，该元素在所有方面都缩小了大约 10px。它似乎没有添加填充或边距，而是仅在该元素上设置新的视口大小。当我将 .hide-for-small 类应用于宽度为 100% 的元素时，这一点最为明显。

任何人都可以帮助阐明这一点吗？

Answer 1

我看到你的代码，但有一些问题。您将 'columns' 和 'hide-for-small' 类添加到不正确的包装 div 中。您必须在“行”中使用“列”和“小隐藏”类。

例如，您的代码必须是这样的：

<div class="row">
    <div class="large-8 hide-for-small columns">
        ...
    </div>
    <div class="large-4 hide-for-small columns">
        ...
    </div>
</div>