基础 - 行不清晰？答案

【问题标题】：Foundation - Rows don't clear?基础 - 行不清晰？
【发布时间】：2014-02-11 23:32:48
【问题描述】：

我正在使用 Zurb Foundation 5，并希望在 .row 中有一个 .row，以便 .row 可以充当多个列的包装器。这很好用，但是当我在内行中添加背景时，它会渗入顶行 - 这是正常行为吗？

我附上了截图和我正在使用的代码。

<div class="row" id="banner" >

    <div class="large-12 medium-12 columns" style="background:green;">
        <h1>Banner/Top</H1>
    </div>

    <div id="bio" class="row"  style="background:red;"  >
        <div class="large-6 medium-6 columns" >
            <h1>LEFT</H1>
        </div>  
        <div class="large-6 medium-6 columns" >
            <h1>RIGHT</H1>
        </div>
    </div>

</div>

截图：

【问题讨论】：

标签： css zurb-foundation clearfix

【解决方案1】：

我认为您需要将顶部横幅放在它自己的行中，以占据整个宽度。像这样：

<div class="row" id="banner" >

    <div class="row">
        <div class="large-12 medium-12 columns" style="background:green;">
            <h1>Banner/Top</H1>
        </div>  
    </div>

    <div id="bio" class="row"  style="background:red;"  >
        <div class="large-6 medium-6 columns" >
            <h1>LEFT</H1>
        </div>  
        <div class="large-6 medium-6 columns" >
            <h1>RIGHT</H1>
        </div>
    </div>
</div>

编辑：您可能需要一个包含横幅+#bio 行的大 12 列

【讨论】：