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

Posted 2023-03-06

【中文标题】如何在 Zurb Foundation 4/5 全屏中制作行？

【英文标题】：How do I make rows in Zurb Foundation 4/5 full screen?

【发布时间】：2013-07-06 19:10:08

【问题描述】：

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

【问题讨论】：

接受的答案让我开始了，但我不得不使用这个：body, html, .row margin: 0px;宽度：100%！重要；最小宽度：100%！重要；

【参考方案1】：

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

.row min-width:100% !important;

【讨论】：

我不喜欢这样，因为它使整个页面达到 100%。如果您只想将页脚或页眉设为 100%，请参阅下面的示例。

嗯，是的，很明显；但这不是最初的问题。您的答案是对您在 cmets 中提出的问题的完全有效的答案。

@BFDatabaseAdmin 使用 !important 是破坏样式表的好方法。任何 .row.narrow 都无法设置 min-width: 50% 因为 *** 评论线程上的某个人有一个接受的答案，即基本 .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 变量。这将流经它使用的任何其他地方。例如，您还可以调整列数、装订线宽度等。

网格文档底部解释更多：http://foundation.zurb.com/docs/components/grid.html

【参考方案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>

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

【讨论】：

不添加行会失去 Zurb 基于网格的基本结构。