css - 基础 - 行不清晰？

Question

我正在使用 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>

截屏：

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