Zurb Foundation 3 - 全宽截面和更改最大宽度？答案

【问题标题】：Zurb Foundation 3 - Full Width Sections & Change Max Width?Zurb Foundation 3 - 全宽截面和更改最大宽度？
【发布时间】：2012-10-02 10:24:09
【问题描述】：

我在我的一个项目中使用ZURB Foundation 3。我喜欢网格系统和响应式网站，但我的问题是我仍然坚信它们应该被构建得比 1000 像素更宽。

我有几个问题：

1) 首先，我想让某些部分（div）全宽。现在我已经阅读了我可以将 <div class="row"> 替换为 <div class="container"> 例如，它会产生这种效果。现在由于某种原因感觉不对，我应该只创建自己的全宽类，还是这样做的正确方法是什么？

2) 我希望它基于更大的分辨率，可能最大 1440 像素宽，甚至是流畅的 100% 全宽。我怎么能这样做，和/或 Foundation 对我来说不是正确的框架？我喜欢它附带所有模板的事实，因此制作模型非常快速和友好。

提前致谢。

【问题讨论】：

针对特定宽度进行设计与响应式设计的整个概念相冲突。
是的，我明白了，但我宁愿将默认值增加到 1440px 等，而不是默认的 1000 像素或 960 的“最大宽度”。这不应该影响响应能力。随时告诉我为什么它们的最大宽度总是 940-1000 像素？
@cimmanon 他不是在问如何创建特定的宽度，而是在问如何设置 Foundation 框架中提供的最大设计宽度。最大宽度 != 宽度

【解决方案1】：

更新：请停止投票。自问题得到解答以来，框架发生了重大变化。如果您使用的是 Foundation 4 或更高版本，请查看更新后的答案并投票。

仅适用于 Foundation 3 的早期版本 将以下覆盖添加到您的 CSS（这必须出现在 Foundation.css 之后或末尾）

.row {
     width: 100%;
}

这将覆盖框架的默认设置并使设计全屏显示。随意更改此值以满足您的需要。

http://foundation.zurb.com/download.php 上还有一个自定义下载（可能做同样的事情，覆盖或替换 .row 宽度）

【讨论】：

太棒了，谢谢，理想情况下，我可以创建一个名为“.full-row”的新类，然后让它 100% 正确？我确实看到了自定义下载版本，但它说 max-width 并且我认为这只是针对移动版本...因为 row 的值对我来说似乎是 1000px 并且默认下载最大宽度是 940px。
我不确定如何添加一个新的 .full-row 类。有几个 CSS 类从 .row 类中搭载了它们的选择器。在实施该更改之前，我会检查foundation.css。
如果它解决了您的问题，请将其标记为答案。谢谢。
所以要对此进行扩展，我怎样才能只使标题全宽？
如果你在 Foundation 4 工作（很多人现在可能会遇到这个问题），你需要使用 min-width 而不是 width: .row {min-width :100% !重要; }

【解决方案2】：

编辑/覆盖基础很容易。在 Foundation 4 中，您可以编辑 _settings.scss 文件。取消注释 $row-width: emCalc(some_number.px);到您想要使用的行宽。

【讨论】：

【解决方案3】：

取消注释 $row-width: rem-calc(1000); 对我有用

【讨论】：