基金会 - 行不清楚？

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列