0

サイズが小さい場合に列を移動する最良の方法は何ですか?

次に例を示します。

 <div class="row">
    <div class="two columns">...</div>
    <div class="seven columns">...</div>
    <div class="three columns">...</div>
</div>

画面サイズが小さい場合、2 列を 7 列の下に移動したい。私がそれを行うことを考え出した唯一の方法は、次のようなことをすることです:

 <div class="row">
    <div class="two columns hide-for-small">...</div>
    <div class="seven columns">...</div>
    <div class="two columns show-for-small">...</div>
    <div class="three columns">...</div>
</div>

しかし、それはちょっと厄介なようで、混乱する可能性があります. より良い方法はありますか？

4

2 に答える 2

1

Foundation には、列の順序を操作できるいくつかのクラスがあります。Foundation Documentationの Source Ordering セクションを確認してください。

例えば：

<div class="row">
    <div class="seven columns push-two">...</div>
    <div class="two columns pull-seven">...</div>
    <div class="three columns">...</div>
</div>

大きな画面では列は 2-7-3 で表示されますが、小さな画面では 7-2-3 に戻ります。

少し面倒で紛らわしいですが、ディスプレイごとに別々の重複する列を作成するよりはましです。

于 2013-01-25T20:38:46.987 に答える
-1

列を互いに下にドロップする方法は、それらをフロートさせてから、CSS の自然な流れで親コンテナーが狭くなりすぎたときにそれらを押し下げることです。あなたの CSS はあなたの問題ではないので、クラスが何をしているのかを知るのは難しいです。

よく使われているフレームワークについて Stack Overflow で多くの質問を目にしますが、CSS が自然にどのように機能するかについて混乱を招くだけだと思います。

回答がなくて申し訳ありませんが、正直なところ、これをチェックしたほうがよいと思います: http://codepen.io/bradfrost/full/zhCwd

私の最善のアドバイスは、可能であればフレームワークに近づかないことです。彼らはあなたが単に必要としない多くの（紛らわしい）コードを追加します. がんばれ、キース。

于 2013-01-25T19:45:39.133 に答える