zurb基础可以有完整的行宽

Question

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

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

我试图寻找如何解决这个问题,但我没有选择.我假设它是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该类并将该元素包装在container100%宽度的类中.现在你可能想把这些东西放在中心,使用这样的类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

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

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

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