zurb基础是否可以有全行宽 [英] zurb foundation is it possible to have full row width

问题描述

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

class="行导航"类=行页脚"

我试图寻找如何解决这个问题，但我别无选择.我假设它是foundation.css 文件中的一个小修复，但由于我不熟悉它，所以目前它有点太多了.

非常感谢任何指针.

解决方案

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

这将跨越页面的整个宽度</标题><div class="row"><div class="十二列">此文本将在所有典型的填充和边距内流动

<页脚>这将跨越页面的整个宽度<div class="row"><div class="十二列">此文本将在所有典型的填充和边距内流动

</页脚>

I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as

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

I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.

Any poiinters much appreciated.

解决方案

I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.

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

这篇关于zurb基础是否可以有全行宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！