zurb基础是否有可能具有全行宽度

我正在使用基础3构建响应式网站，但我希望页脚和导航背景宽度占据整个宽度？我已经命名我的行为zurb基础是否有可能具有全行宽度

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

我试图寻找如何解决这个问题，但我没有选择。我假设这是在foundation.css文件中的一个小修复，但目前我刚刚接触它，这有点太过分了。

任何poiinters非常感谢。

来源

2012-08-01 Chou One

想通了somehow.thanks – 2012-08-01 06:32:30

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

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

你应该能够让你从那里需要什么。该演示是为2.2，但功能非常类似于v3。

来源

2012-08-01 13:33:04

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

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

来源

2012-09-05 00:09:58 cosmicdot

又是什么类.centered？你应该添加一些更多的回答你的回答 – Mark 2012-09-25 07:19:35

.centered内置到Zurb的基础 - 有一个专门讨论这个的文档，http://foundation.zurb.com/docs/grid.php有很多快速定位非常有用的元素。 – cosmicdot 2012-11-20 17:19:30

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

<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-19 15:57:45 nikolasleblanc

只需将您的代码放在div class =“row”之外，即可！ – 2013-08-10 18:01:07

我同意这个答案，但你可以使用任何div来包装。它不一定是诸如页脚之类的html5元素。它必须完全在任何嵌套网格结构之外。通常，您需要添加边距和填充以使其与页面上的其他元素可视化地“匹配”。我还创建了一个[代码笔来说明上述概念]（http：// codepen。IO/jamesstoneco /笔/ jErXyY）。 – JAMESSTONEco 2015-05-18 02:33:48

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

来源

2013-01-01 23:12:12 Jordan

如果你不给它的“行”类，并把塔内它适用于100％的宽度

来源

2013-02-04 23:28:17

你真的想保留该行类，否则你失去了很多的电网系统的功率。为什么不将$ rowWidth的设置从1000（默认）更改为100％。这可以在文件中找到foundation_and_overrides.scss

来源

2013-02-12 13:25:18 stephen

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

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

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

我把宽度在这里也覆盖基地，但它是在foundation.css已经宣布所以你可以忽略它。

来源

2013-03-13 15:38:41

这是我使用的方法。我认为它是最简单的，并且符合基金会的语义哲学。 – 2013-06-24 16:31:03

这也是我所走的路线。如果它是全宽页眉或页脚，我只需将该行放在页眉/页脚内。如果全宽度行是常见现象，尽管这是最佳路线。 – alexbooots 2013-08-23 18:42:34

预期行为的更好答案 – iwalktheline 2015-08-19 19:41:43

使用“节”为：

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

然后，分配一个ID的部分，并使用你的背景。

来源

2013-06-10 21:05:15 Troy

-5

是，只要使用这样的：

<div class="large-12 columns"> 

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2> 

    </div>

来源

2013-11-06 09:01:18 Chris

这不起作用 – 32423hjh32423 2014-01-12 17:47:46

只是覆盖max-width财产max-width: initial;，例如，

.fullWidth { 
     width: 100%; 
     margin-left: auto; 
     margin-right: auto; 
     max-width: initial; 
    } 

<div class="row fullWidth"> </div>

这个工作对我来说:)

来源

2014-04-15 08:52:45

我知道已经有很多答案，但是我认为如果有人使用Foundation 5，并且偶然发现了这个问题（和我一样），我有一些新的东西可以添加到这个主题中。

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

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

你可以看到，它甚至在Zurb基金会的文档页面中使用这样的（他们改变.row类，虽然）：http://foundation.zurb.com/docs/（只是看看网页源代码）

来源

2014-07-06 10:59:46 wasil

只需设置

$row-width: 100%;

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

来源

2014-09-03 11:05:50 Philip

这是关于基金会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-10 11:38:02 timofey

如果您使用顶嘴，这是一个更好的办法：

<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-18 10:23:11

基金会6支持此功能自然地row expanded。代码示例：

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

来源

2016-12-13 06:32:43 elicohenator

zurb基础是否有可能具有全行宽度

回答

相关问题