Question

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

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

我试图找到如何解决这个问题，但我没有选择。我假设它在foundation.css文件中是一个小修复，但是由于我是新手，它现在有点过于庞大。

任何诗人都非常感激。

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

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

请参阅http://edcharbeneau.github.com/FoundationSinglePageRWD/

上的文章和演示

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

Answer 5

使用“部分”，如：

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

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

Answer 6

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

Answer 7

这与基础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>

Answer 8

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

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

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

Answer 9

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

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

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

这适合我：）

Answer 10

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

中找到

Answer 11

只需设置

即可

$row-width: 100%;

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

Answer 12

我不确定我是否遗漏了某些内容，但我必须为.row添加.centered div才能正常工作。在这种情况下，我仍然可以将.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>

zurb基础可以有完整的行宽

15 个答案: