zurb基础是否可以有全行宽

我使用基础3build立一个响应式网站，但我想有页脚和导航背景宽度占据整个宽度？ 我已经命名我的行

class="row navigation" class="row footer" 

我试图寻找如何解决这个问题，但我没有select。 我假设这是在foundation.css文件中的一个小小的修复，但是现在有点太过分了，因为我是新手。

任何poiinters非常感谢。

Answer 1

我昨天遇到了同样的问题。 诀窍是，对于全宽度跨区块，您只需将它们保留在行/列结构之外，因为行/列将始终应用默认的填充。 保持您的页脚和标题自己，并使用行/列内。

 <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> 

Answer 2

我一直在做的是添加一个自定义的类，以便我可以链接与.row并覆盖最大宽度设置。

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

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

我也把宽度放在这里来覆盖基础，但是它已经在foundation.css中声明了，所以你可以忽略它。

Answer 3

如果您使用的是Zurb Foundation Framework，只需删除row类并将该元素包装在宽度为100％的类container中。 现在你可能要把东西放在centered像这样使用类：

 <div class="container navigation"> <div class="centered"> Some navigation stuff </div> </div> 

Answer 4

我完全不同意答案。 你不应该使用！重要的

请参阅我的文章和演示http://edcharbeneau.github.com/FoundationSinglePageRWD/

你应该能够从那里得到你所需要的。 该演示是为2.2，但function非常类似于v3。

Answer 5

使用“部分”如下所示：

 <section> <div class="row"> <div class="small-12 columns"> </div> </div> </section> 

然后，为该部分分配一个ID并将其用于您的背景。

Answer 6

我知道已经有很多答案了，但是如果有人正在使用Foundation 5并且偶然发现了这个问题，我想我在这个主题上有了新的东西。

由于Foundation正在使用REM单元，因此最好使用它们来更改.row类，并添加额外的类，以便只能select全行。 例如通过使用.full类：

 .row.full { max-width: 80rem; /* about 90rem should give you almost full screen width */ } 

你可以看到，即使在Zurb基金会的文档页面（虽然他们改变了.row类），它仍然是这样使用的： http : .row （只要看看页面源代码）

Answer 7

Foundation 6自然地支持这个特性， row expanded了row expanded 。 代码示例：

 <div class="expanded row"> ... </div> 

阅读更多信息： http : //foundation.zurb.com/sites/docs/grid.html#fluid-row

Answer 8

只需将max-width属性覆盖为max-width: initial; ， 例如，

  .fullWidth { width: 100%; margin-left: auto; margin-right: auto; max-width: initial; } <div class="row fullWidth"> </div> 

这对我有用:)

Answer 9

这是关于基金会5.迄今为止所给出的答案都没有提供边缘到边缘的全部宽度。 这是因为内部.columns添加填充。

要获得真正的边缘到全angular的内容，请将其添加到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> 

Answer 10

你真的想要保持行类，否则你会失去很多网格系统的力量。 为什么不把$ rowWidth的设置从1000（默认）更改为100％。 这可以在文件foundation_and_overrides.scss中find

Answer 11

只要设置

 $row-width: 100%; 

http://foundation.zurb.com/forum/posts/927-full-width-layouts

Answer 12

我不知道如果我失去了一些东西，但我不得不添加一个.row div为.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> 

Answer 13

如果你不给它的“行”类，并把它放在里面的工作在100％的宽度

Answer 14

如果你使用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; } } } 

Answer 15

是的，就像这样使用：

  <div class="large-12 columns"> <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2> </div>