zurb-foundation - Zurb Foundation 4 が機能しない

Question

Zurb Foundation バージョン 3 では、foundation.css ファイルをインクルードすると、グリッドなどを作成できます。

バージョン 4 では、すべて同じ方法で行うと機能しません。

私は何が欠けていますか？

Answer 1

全て同じようにしたら

V4 のグリッドに使用する新しいクラスがあります。言うだけではfour columnsなく、列が大きなビュー/デバイス用か小さなビュー/デバイス用かを指定します。したがって、divが消費する必要がある列の数が必要ですsmall-X。次に例を示します。large-XX

<div class="row">
    <div class="ten columns centered">
        <h1>This grid won't work on V4</h1>

        <div class="row">
            <div class="four columns">
                <div class="panel">
                    <p>Left panel</p>
                </div>
            </div>
            <div class="four columns">
                <div class="panel">
                    <p>Center panel</p>
                </div>
            </div>
            <div class="four columns">
                <div class="panel">
                    <p>Right panel</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="ten columns centered">
        <h1>But this will...</h1>
        <div class="row">
            <div class="small-2 large-4 columns">
                <div class="panel">
                    <p>Left panel</p>
                </div>
            </div>
            <div class="small-4 large-4 columns">
                <div class="panel">
                    <p>Center panel</p>
                </div>
            </div>
            <div class="small-6 large-4 columns">
                <div class="panel">
                    <p>Right panel</p>
                </div>
            </div>
        </div>  
    </div>        
</div>

単一の div での小と大の組み合わせに注意してください。左側のパネルは、小型デバイス (携帯電話) では 2 列のみであり、デスクトップなどの大型デバイスでは 4 列しかないことがわかります。同様に、右側のパネルは小型デバイスでは 6 列、大型デバイスでは 4 列になります。ブラウザのサイズで遊んでみると違いがわかります。

V4 グリッドの仕組みの詳細については、このページにアクセスしてください。