「col-lg-push」と「col-lg-pull」を使用してブートストラップ 3 で列の順序を制御するにはどうすればよいですか?

Twitter Bootstrap 3 でのcol-lg-push とcol-lg-pull による列の順序の操作

Twitter Bootstrap 3 では、col -lg-push クラスとcol-lg-pull クラスを使用すると、開発者はデスクトップ上のグリッド レイアウト内の列の順序を操作できます。およびビューポートの上。この機能は、特定の画面サイズで特定の順序で列を表示する必要があるレスポンシブ レイアウトを作成する場合に特に便利です。

col-lg-push とcol-lg-pull について

• col-lg-push-x: このクラスは、列を右にプッシュします。指定された列数を指定して、その位置をグリッド内で効果的に右にシフトします。
• col-lg-pull-x: このクラスは、指定された列数だけ列を左にプルします。 、グリッド内の位置を左に移動します。

構文と使用法

これらのクラスを使用するには、列の幅を定義するcol-lg-* クラスにクラスを追加するだけです。たとえば、列を 5 列分右にプッシュする場合は、col-lg-5col-lg-push-5 クラスを使用します。

Example

次のマークアップを考えてみましょう:

<div class="row">
  <div class="col-lg-5 col-lg-push-5">Content B</div>
  <div class="col-lg-5 col-lg-pull-5">Content A</div>
  <div class="col-lg-2">Content C</div>
</div>

デスクトップ ビューポート (lg が適用される) では、コンテンツ B は5 列分右に寄せられ、コンテンツ C の右側に配置されます。コンテンツ A は 5 列分左に寄せられ、実質的にコンテンツ B の左側に配置されます。これにより、次のようなレイアウトになります:

[Content B] [Content A] [Content C]

モバイル ビューポートの例外

プッシュおよびプル機能は、次のサイズより大きいビューポートにのみ適用されることに注意することが重要です。または指定されたサイズと同じです。たとえば、col-lg-push-5 を使用すると、デスクトップ ビューポート (lg が適用される場所) にのみ列がプッシュされます。モバイル ビューポートでは、列はデフォルトの順序でレンダリングされます。

結論

col-lg-push クラスとcol-lg-pull クラスは、次の強力な方法を提供します。 Bootstrap 3 レイアウトの列の順序を操作します。構文と使用ガイドラインを理解することで、開発者は、望ましい視覚的な階層を維持しながら、さまざまな画面サイズに適応するレスポンシブなレイアウトを作成できます。

以上が「col-lg-push」と「col-lg-pull」を使用してブートストラップ 3 で列の順序を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。