小さい画面サイズでのみ Bootstrap 3 で列をプッシュ/プルする方法は?

ブートストラップ 3: 小さい画面サイズのみで列をプッシュ/プルする方法

ブートストラップは、列をプッシュおよびプルして調整する機能を提供します。画面サイズに基づいたレイアウト。ただし、大きい画面では列の位置を維持しながら、小さい画面サイズでのみ列をプッシュ/プルしたい状況が発生する場合があります。

次の HTML 構造を考慮してください:

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

このレイアウトは、大きな画面では次のように表示されます:

|    1    |  2  |  3  |  4  |    5    |

しかし、小さな画面では別のレイアウトが必要です:

|        1        |        5        |
|     2     |     3     |     4     |

解決策:

これを達成するには、「モバイルファースト」の考え方で問題に取り組む必要があります。最初に最小の画面サイズに合わせてレイアウトを構成し、次にプッシュ/プル クラスを使用して、大きな画面上の目的の位置に列を移動します。

更新された HTML:

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

大画面と小画面の両方の列クラスを同じタグに配置することで、タブレット上で列が最初に希望する順序で配置されるようにすることができます。次に、プッシュ/プル クラスを使用してデスクトップ上の位置を調整します。

この更新されたコードにより、すべての画面サイズで希望のレイアウトが得られます:

大画面:

|    1    |        5        |     2     |     3     |     4     |

小さい画面:

|        1        |        5        |
|     2     |     3     |     4     |

以上が小さい画面サイズでのみ Bootstrap 3 で列をプッシュ/プルする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。