0

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

スクリーンショット:

4

1 に答える 1

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>

編集: banner+#bio 行の両方をラップする 1 つの大きな 12 列が必要になる場合があります

于 2014-01-22T04:11:19.153 に答える