我正在使用基础 3 来构建响应式网站，但我想让页脚和导航背景宽度占据整个宽度？我已将我的行命名为
class="row navigation"
class="row footer"
我试图寻找如何解决这个问题，但我没有选择。我假设它是foundation.css 文件中的一个小修复，但由于我是新手，目前它有点过于庞大。
任何指针都非常感谢。
问问题
67787 次
15 回答
67
我昨天遇到了同样的问题。诀窍是，对于全宽跨越块，您只需将它们排除在行/列结构之外，因为行/列将始终应用默认填充。保留您的页脚和页眉，并在其中使用行/列。
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
于 2012-10-19T15:57:45.907 回答
66
我一直在做的是添加一个自定义类，以便我可以将它与 .row 链接并覆盖最大宽度设置。
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
我在这里也放了宽度来覆盖基础，但是它已经在foundation.css中声明了，所以你可以省略它。
于 2013-03-13T15:38:41.130 回答
12
如果您使用的是 Zurb Foundation Framework，只需删除row该类并将元素包装在一个container100% 宽度的类中。现在你可能想把这些东西放在中心，使用这样的类centered：
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
于 2012-09-05T00:09:58.493 回答
8
我完全不同意这个答案。你不应该使用 !important
请参考我在http://edcharbeneau.github.com/FoundationSinglePageRWD/上的文章和演示
你应该能够从那里得到你需要的东西。该演示适用于 2.2，但在功能上与 v3 非常相似。
于 2012-08-01T13:33:04.030 回答
4
使用“部分”，如：
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
然后，为该部分分配一个 ID，并将其用于您的背景。
于 2013-06-10T21:05:15.390 回答
4
Foundation 6 自然地支持这个特性row expanded。代码示例：
<div class="expanded row">
...
</div>
在这里阅读更多：http: //foundation.zurb.com/sites/docs/grid.html#fluid-row
于 2016-12-13T06:32:43.203 回答
3
这是关于Foundation 5的。到目前为止给出的答案都没有提供边到边的全宽。那是因为内部.columns添加了填充。
要获得真正的边到边全宽内容，请将其添加到您的 CSS 中。
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
只需将.full类添加到.row您希望扩展全宽的类。
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
于 2014-12-10T11:38:02.950 回答
2
max-width只需将属性覆盖为max-width: initial;，例如，
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
这对我有用:)
于 2014-04-15T08:52:45.877 回答
2
我知道已经有很多答案了，但是如果有人使用Foundation 5并且偶然发现了这个问题（比如我），我想我可以在这个主题中添加一些新内容。
由于 Foundation 使用 REM 单元，最好.row使用它们来改变类并添加额外的类，这样你就可以只选择全宽的行。例如通过使用.full类：
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
即使在 Zurb Foundation 的文档页面中，您也可以看到它是这样使用的（.row尽管他们改变了类）： http: //foundation.zurb.com/docs/（只需查看页面源代码）
于 2014-07-06T10:59:46.727 回答
1
你真的会想要保留行类，否则你会失去很多网格系统的力量。为什么不将 $rowWidth 的设置从 1000（默认）更改为 100%。这可以在文件foundation_and_overrides.scss 中找到
于 2013-02-12T13:25:18.093 回答
1
于 2014-09-03T11:05:50.307 回答
0
如果您不给它“行”类并在其中放置列，则它的宽度为 100%
于 2013-02-04T23:28:17.247 回答
0
我不确定我是否遗漏了什么，但我必须添加一个.rowdiv.centered才能工作。在这种情况下，我仍然可以将其.header设置为具有全宽背景，但该.container方法对我不起作用。
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
于 2013-01-01T23:12:12.557 回答
-1
如果您使用的是 sass，这是一种更好的方法：
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
于 2015-06-18T10:23:11.013 回答
-5
是的，就像这样使用：
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>
于 2013-11-06T09:01:18.833 回答