ホームページ >ウェブフロントエンド >CSSチュートリアル >「col-lg-push」と「col-lg-pull」を使用してブートストラップ 3 で列の順序を操作するにはどうすればよいですか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-12 21:32:18817ブラウズ

How Can I Manipulate Column Order in Bootstrap 3 Using `col-lg-push` and `col-lg-pull`?

Twitter Bootstrap 3 でのcol-lg-push とcol-lg-pull を使用した列順序操作

Twitter Bootstrap の便利な Col-lg- Push クラスと Col-lg-pull クラスは、大きな画面 (デスクトップまたは

構文の理解

これらのクラスの構文は次のとおりです。

  • col-vp-push-x:列 x 以上のビューポート上の通常の位置から右への列数vp.
  • col-vp-pull-x: vp.
ここで、vp は xs、sm、md、または lg であり、x の範囲は 1 ~ 12.

シナリオ例

次の例で、長さ 5 の 2 列と長さ 2 の 1 列の 3 列のグリッドを表示する場合を考えてみましょう。

  • デスクトップビュー (≥ lg): ディスプレイ[5] [5] [2] 横。
  • Mobile View (≤ sm): [5] (2 番目) [5] (1 番目) [2] を表示します。

コード:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'></div>
  <div class='col-lg-5 col-lg-pull-5'></div>
  <div class='col-lg-2'></div>
</div>

説明:

    最初の列 lg -5 要素は 5 列右に移動されるため、通常の 5 列後から開始されます。
  • 2 番目のcol-lg-5 要素は 5 列左にプルされるため、通常の位置の 5 列前から開始されます。
  • col-lg-2 要素はそのまま残ります。デフォルトの順序です。

注: 正しく機能することを保証するには、マークアップ内の要素の順序を確認してください。大きな画面で希望の順序と一致します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。