如何在 Zurb Foundation 4/5 全屏中制作行？答案

【问题标题】：How do I make rows in Zurb Foundation 4/5 full screen?如何在 Zurb Foundation 4/5 全屏中制作行？
【发布时间】：2013-07-06 19:10:08
【问题描述】：

默认情况下，Zurb Foundation 4 和 5 中的行以 1000 像素的最大宽度运行，即使在非常大的显示器上也是如此，这会在内容的任一侧创建边距。如何让它全屏运行而不影响设计的响应性？

【问题讨论】：

【解决方案1】：

将以下代码添加到 CSS 文件中：

.row {min-width:100% !important;}

【讨论】：

我不喜欢这样，因为它使整个页面达到 100%。如果您只想将页脚或页眉设为 100%，请参阅下面的示例。
嗯，是的，很明显；但这不是最初的问题。您的答案是对您在 cmets 中提出的问题的完全有效的答案。
@BFDatabaseAdmin 使用 !important 是破坏样式表的好方法。任何 .row.narrow 都无法设置 min-width: 50% 因为 stackoverflow 评论线程上的某个人有一个接受的答案，即基本 .row 样式应该有一个 !important 标记以覆盖默认的 min-width在行...
@Lotus - 我不同意，但不同的笔画等。如果人们想使用该版本，Sass 的答案在下面，我已经支持它，但我的答案快速、简单并且有效，即使用户只有 CSS 的基本知识。

【解决方案2】：

我认为最好的方法是这样。

将此添加到您的 css 或自定义 css-

.row.full-width {
    width: 100%;
    max-width: 100%;
}

然后在您的 html 中，执行此操作-

<div class="row full-width"> </div>

如果您只想对页眉或页脚使用全屏，这将允许您保持网格系统完好无损。

【讨论】：

【解决方案3】：

如果您使用的是 Sass/Compass、zurb-foundation gem 或自定义的 Foundation 发行版，则可以设置 $row-width 变量。这将流经它使用的任何其他地方。例如，您还可以调整列数、装订线宽度等。

【讨论】：

【解决方案4】：

<div class="row">
    <div class="large-6 columns"></div>
    <div class="large-6 columns"></div>
</div>

这将给出 1000 像素的宽度

<div class="large-6 columns"></div>
<div class="large-6 columns"></div>

但是如果您使用没有行类的列类，您将获得全屏...

【讨论】：