4

まったくハッキングせずにグリッドを利用する良い方法を見つけようとしています。

私がやりたいのはsmall-4、一番上の行に 3 つの幅のグリッド (それぞれに別名) があり、2 番目の行では列を一致させたいのですが、small-4要素は 2 つだけです。

通常、答えは1つを実行してから1つ実行することですsmall-4がsmall-8、入力がwidth: 100%これに設定されているため、うまくいきません。

これを箱から出して行う方法はありますか？オフセットについては知っていますが、それは右に移動するように設定されたアイテムに対してのみ機能します。

現時点では、2 つsmall-4の div で右の div が右に浮いており、上の div と一致していません。さらに追加することもできsmall-4ますが、これについてはベスト プラクティスに従いたいと思います。

ここに私のコードがあるので、私が何を意味するかを見ることができます：

<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>
4

2 に答える 2

20

Zurb Foundation はfloat、デフォルトで右側の最後の列になります。

[class*="column"]+[class*="column"]:last-child { /* Taken from foundation.css */
  float: right;
}

不完全な行

ブラウザのさまざまな丸め動作を回避するために、Foundation は行の最後の列を右にフロートさせ、端​​が揃うようにします。[...]

それをオーバーライドして最後の列を左に移動する方法がいくつかあります。

1..endクラスの使用(バージョン 5.0.3 ではバグがあります)

[...] 行に最大 12 列を追加するカウントがない場合、endその動作をオーバーライドするために、最後の列にクラスのタグを付けることができます。

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns end"> ... </div>
</div>

バージョン 5.0.3 でも動作するはずですが、別のグローバルクラスがそれをオーバーライドする.endため、正しく動作しません。ただし、バージョン 5.1.0 以降では修正されています。.end

例 (v4.1.6) •例 (v5.0.3) (バグあり) •例 (v5.1.0)

関連する問題は次の場所にあります。

何らかの理由で v5.0.3 を使用している場合は、いくつかの代替手段があります。

2..leftクラスの使用

1 つのオプションは、最後の列でユーティリティ クラスを使用して左にフロートさせることです。.left

例はこちら (v5.0.3)。

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns left"> ... </div>
</div>

3. デフォルトのスタイルをオーバーライドする

別のオプションとして、Zurb Foundation のデフォルト スタイルを次のようにオーバーライドすることもできます。

例はこちら(v5.0.3)。

.columns.end { float: left !important; }

または次のようなもの：

例はこちら(v5.0.3)。

[class*="column"]+[class*="column"]:last-child {
  float: left;
}

4. ソース順序付けクラスの使用

一般に、*-pull-#/*-push-#ソース順序付けクラスを使用して、列を横に移動できます。

この場合、small-pull-4次のように、2 行目の 2 列目に使用する必要があります。

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 small-pull-4 columns"> ... </div>
</div>

ワーキングデモ。(Foundation 5.0.3 を使用)

注: Foundation 4 では、pull-4代わりにクラスを使用する必要があります。ドキュメントのソース注文セクションを見てください。ただし、これは大型ディスプレイでのみ機能します。

更新されたデモ。 (Foundation 4.1.6 を使用)

于 2014-02-28T20:18:10.827 に答える
1

最後のdiv（右に行くもの）のクラスを「small-4 columns end」に変更するだけです

于 2015-05-02T23:49:41.557 に答える