Html zurb基础是否可以有全行宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11751391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
zurb foundation is it possible to have full row width
提问by Chou One
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
我正在使用基础 3 来构建响应式网站，但我想让页脚和导航背景宽度占据整个宽度？我已将我的行命名为
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
我试图寻找如何解决这个问题，但我别无选择。我假设它是foundation.css 文件中的一个小修复，但由于我是新手，所以目前它有点过于庞大。
Any poiinters much appreciated.
任何指针非常感谢。
回答by nikolasleblanc
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
我昨天遇到了同样的问题。诀窍是，对于全宽跨越块，您只需将它们排除在行/列结构之外，因为行/列将始终应用默认填充。保持自己的页脚和页眉，并在其中使用行/列。
<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>
回答by Stacey Schlenker
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
我一直在做的是添加一个自定义类，以便我可以将它与 .row 链接并覆盖 max-width 设置。
<div class="row full-width"></div>
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
我也将宽度放在此处以覆盖基数，但它已在foundation.css 中声明，因此您可以省略它。
回答by cosmicdot
If you're using Zurb Foundation Framework, simply remove the rowclass and wrap the element in a class containerthat is 100% width. Now you probably want to center the stuff, use class centeredlike this:
如果您使用 Zurb Foundation Framework，只需删除row该类并将元素包装在container100% 宽度的类中。现在你可能想要将这些东西居中，使用这样的类centered：
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
回答by Ed Charbeneau
I completely disagree with the answer. You shouldn't have to use !important
我完全不同意答案。你不应该使用 !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
请参考我在http://edcharbeneau.github.com/FoundationSinglePageRWD/ 上的文章和演示
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
你应该能够从那里得到你需要的东西。该演示适用于 2.2，但在功能上与 v3 非常相似。
回答by Troy
Use "Section" as in:
使用“部分”如下：
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
然后，为该部分分配一个 ID，并将其用于您的背景。
回答by elicohenator
Foundation 6 supports this feature naturally with row expanded. code example:
Foundation 6 很自然地支持这个特性row expanded。代码示例：
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
在此处阅读更多信息：http: //foundation.zurb.com/sites/docs/grid.html#fluid-row
回答by timofey.com
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columnsadd padding.
这是关于 Foundation 5. 到目前为止给出的答案都没有提供边缘到边缘的全宽。那是因为内部.columns添加了填充。
For a true edge-to-edge, full width content, add this to your CSS.
对于真正的边到边、全宽内容，请将其添加到您的 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; }
Simply add .fullclass to a .rowyou wish to extend full width.
只需将.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>
回答by Able Alias
Just override the max-widthproperty as max-width: initial;, for example,
只需将max-width属性覆盖为max-width: initial;，例如，
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
这对我有用:)
回答by wasil
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5and stumbled upon this question (like me).
我知道已经有很多答案了，但是如果有人使用Foundation 5并偶然发现这个问题（像我一样），我想我可以在这个主题中添加一些新内容。
As Foundation is using REM units, it would be best to alter .rowclass using them and by adding extra class, so you can have only selected rows full-width. For example by using .fullclass:
由于 Foundation 使用 REM 单位，因此最好.row使用它们更改类并添加额外的类，因此您只能选择全宽的行。例如通过使用.full类：
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .rowclass, though): http://foundation.zurb.com/docs/(just look into page source code)
您可以看到它甚至在 Zurb Foundation 的文档页面中也是这样使用的（.row尽管他们改变了类）：http: //foundation.zurb.com/docs/（只需查看页面源代码）
回答by Philip
Just set the
只需设置
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
http://foundation.zurb.com/forum/posts/927-full-width-layouts
