如何在 Foundation 6 中禁用响应式网格答案

【问题标题】：How to disable responsive grid in Foundation 6如何在 Foundation 6 中禁用响应式网格
【发布时间】：2016-12-08 00:13:49
【问题描述】：

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

非常感谢。

【问题讨论】：

我使用了现在可以使用了。

标签： css responsive-design zurb-foundation zurb-foundation-6

【解决方案1】：

从标题中删除此 meta 标记。

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

您还可以选择使用 filzhut 的 Responsive Switch。

【讨论】：

我这样做了，但仍在应用块网格。
您是否正在调整浏览器的大小以查看响应是否消失？
在 Chrome 中使用设备模拟器。
在实际设备上试用。大多数设备模拟器充当常规桌面/笔记本电脑浏览器。你总是可以修复你的row，columns- 来固定宽度，我不推荐这样做。
实际上甚至在真实设备上。我已经修复了行 atm，列工作正常（未调整大小）但块网格仍在调整大小。

【解决方案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 教程，提供一个链接，我可能会更新这个答案。

【讨论】：