css - 如何在 Foundation 6 中禁用响应式网格

Question

我目前正在使用新的 Foundation 6 开发一个响应式网站，但我似乎无法通过版本 5 的教程找到如何禁用响应式网格（我需要将其设为客户可选）。

非常感谢。

Answer 1

从标题中 删除此元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

您还可以选择使用filzhut 的响应式开关。

Answer 2

删除行、列和列类的样式。

在您希望删除网格样式的每个页面上的基础 css 链接之后，将此 css 代码块添加到标题中。或者，您可以在底部的基础 css 文件中包含样式：

<style type="text/css">
    .row, .column, .columns { margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; position: static !important; width : auto !important;  max-width: none !important; clear: none !important; }
</style>

---

这就是我将样式添加到foundation.min.css 文件底部以删除网格样式的意思。此外，这意味着您必须在本地托管 css 文件，而不是使用 cdn。

---

现在，至于让您的客户选择网格或不网格，您可以向他们展示两个开发站点，一个有网格，一个没有网格。或者，您可以在页面上放置一个按钮或某些元素，然后使用 js 来添加和删除表单中的 css 或元素，以使用服务器脚本来完成。在您提到的问题中：

由版本 5 中的教程

我没有找到任何带有网格 css 开关的 f5 教程，提供一个链接，我可能会更新这个答案。