プッシュ クラスとプル クラスを使用して、可変画面サイズで応答性の高いブートストラップ列レイアウトを実現するにはどうすればよいですか?

可変画面サイズのレスポンシブ ブートストラップ列レイアウト

Web 開発では、多くの場合、ビューアのサイズに基づいてページのレイアウトを調整する必要があります。画面サイズ。ブートストラップでは、プッシュ クラスとプル クラスを使用してこれを行う便利な方法が提供されています。

ブートストラップでの列のプッシュとプル

列をプッシュまたはプルするには、適切なクラスを追加するだけです。列の HTML 要素に追加します。これらのクラスの構文は次のとおりです。

col-{breakpoint}-{size}

たとえば、小さな画面 (つまり、「xs」) で列を 2 列右にプッシュするには、クラス Col-xs-push- を追加します。 2.同様に、大きな画面 (つまり、「lg」) で 3 列左に列をプルするには、クラス Col-lg-pull-3.

小さい画面で列をプッシュ/プルする を追加します。画面サイズ

指定された質問で目的のレイアウトを実現するには、最初に小さい画面サイズを対象とするクラスを使用することが重要です。これにより、モバイルファーストのアプローチが確実に維持されます。

<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>

以上がプッシュ クラスとプル クラスを使用して、可変画面サイズで応答性の高いブートストラップ列レイアウトを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。