2

私は Zurb Foundation 4.3 を使用していますが、Zurb の小規模および大規模な列クラスに頭を悩ませています。列に大きなクラスのみを使用する以下のコード サンプルでは、​​UI の幅が変更されると、2 番目の列が最初の列の下に再配置されます。UIコンテンツをきれいに保つため、これは素晴らしいことです

        <div class="row">
        <div class="large-8 columns rounded">
            Bubbles
        </div>
        <div class="large-4 columns rounded">
            Yadda Yadda Yadda
        </div>
    </div>

ただし、小さなクラスを列に追加すると、2 番目の列の位置が変更されず、UI が乱雑になります。

        <div class="row">
        <div class="small-4 large-8 columns rounded">
            Bubbles
        </div>
        <div class="small-8 large-4 columns rounded">
            Yadda Yadda Yadda
        </div>
    </div>

ページ全体の幅の変更に合わせて、コンテンツの列幅を変更できる機能が気に入っています。ただし、ページを幅広から幅狭にドラッグすると、小さいクラスを使用するとコンテンツの位置が変わりません。私は何が欠けていますか？ありがとう。

4

1 に答える 1

3

小さなクラスは、小さな画面での列の幅を制御します。小さなクラスを指定せずに、列はデフォルトで小さな画面で small-12 または 100% の幅になります。

2 番目の例では、最初の列と 2 番目の列の比率は、中画面では 2:1 ではなく、小さな画面では 1:2 になります。列は同じ順序で隣り合って配置されていますが、サイズが入れ替わっています。これはあなたが見ているものでなければなりません。

最初の例のように垂直方向に積み重ねたいが、列の順序を入れ替えたい場合は、次を使用します。

<div class="row">
    <div class="large-4 push-8 columns rounded">
        Yadda Yadda Yadda
    </div>
    <div class="large-8 pull-4 columns rounded">
        Bubbles
    </div>
</div>

これがあなたが達成したいことではない場合は、別の解決策を指定するお手伝いをします

于 2013-08-17T01:28:05.830 に答える