ホームページ > ウェブフロントエンド > CSSチュートリアル > 小さい画面サイズでのみ Bootstrap 3 で列をプッシュ/プルする方法は?

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

DDD
リリース: 2024-11-01 12:04:29
オリジナル
1062 人が閲覧しました

How to Push/Pull Columns in Bootstrap 3 Only on Smaller Screen Sizes?

ブートストラップ 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート