zurb基础是不是可以有全行宽

Posted 2023-02-22

【中文标题】zurb基础是不是可以有全行宽

【英文标题】：zurb foundation is it possible to have full row widthzurb基础是否可以有全行宽

【发布时间】：2012-07-29 21:15:02

【问题描述】：

我正在使用基础 3 来构建响应式网站，但我希望页脚和导航背景宽度占据整个宽度？我已将我的行命名为

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

我尝试寻找解决此问题的方法，但我别无选择。我假设它是foundation.css 文件中的一个小修复，但由于我是新手，所以目前它有点过于复杂了。

非常感谢任何指针。

【参考方案1】：

我完全不同意这个答案。你不应该使用 !important

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

你应该能够从那里得到你需要的东西。该演示适用于 2.2，但功能与 v3 非常相似。

【参考方案2】：

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

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

【讨论】：

class .centered 是什么？您应该在答案中添加更多内容

.centered 是内置在 Zurb 基础中的 - 文档中有专门的部分，foundation.zurb.com/docs/grid.php 有很多非常有用的快速定位元素。

【参考方案3】：

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

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

【讨论】：

我同意这个答案，但是你可以使用任何 div 来换行。它不必是诸如页脚之类的 html5 元素。它必须完全位于任何嵌套网格结构之外。通常，您需要添加边距和内边距，以使其在视觉上与页面上的其他元素“匹配”。我还创建了一个code pen to illustrate the above concept。

【参考方案4】：

我不确定我是否遗漏了什么，但我必须添加一个.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>

【参考方案5】：

如果你不给它“行”类并把列放在里面，它的宽度是 100%

【参考方案6】：

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

【参考方案7】：

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

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

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

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

【讨论】：

这是我使用的方法。我认为它是最简单的，并且符合 Foundation 的语义哲学。

这也是我走的路线。如果它是全宽页眉或页脚，我只需将行放在页眉/页脚内。如果全宽行很常见，但这是最好的选择。

预期行为的更好答案

【参考方案8】：

使用“部分”，如：

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

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

【参考方案9】：

是的，就这样使用：

  <div class="large-12 columns">

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

  </div>

【参考方案10】：

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

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

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

这对我有用:)

【参考方案11】：

我知道已经有很多答案了，但是如果有人使用 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/（只需查看页面源代码）

【参考方案12】：

只需设置

$row-width: 100%;

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

【参考方案13】：

这是关于 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>

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

【参考方案15】：

Foundation 6 通过row expanded 自然地支持此功能。代码示例：

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

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