ホームページ > ウェブフロントエンド > CSSチュートリアル > ブートストラップで .col-*-12 列を再配置するためにプッシュ/プル クラスを使用できますか?

ブートストラップで .col-*-12 列を再配置するためにプッシュ/プル クラスを使用できますか?

Susan Sarandon
リリース: 2024-11-02 00:48:31
オリジナル
565 人が閲覧しました

Can Push/Pull Classes Be Used to Rearrange .col-*-12 Columns in Bootstrap?

.col-*-12 列のブートストラップ プッシュ/プルを使用した列順序の変更

問題:

目的プッシュ/プル ディレクティブを使用して、モバイル デバイス上のブートストラップで 2 つの同じサイズの列 (.col-xs-12) を再配置し、順序を逆にします。ただし、このアプローチがこのサイズの列に対して実行可能かどうかは疑問です。

解決策:

プッシュ/プルの制限:

プッシュ ディレクティブとプル ディレクティブは、さまざまな画面サイズに合わせて列の順序を変更するように設計されていますが、制限があります。 12 列グリッド (.col-*-12) 全体を占める列を再配置することは、これらのヘルパーでは実現できません。

代替アプローチ:

  1. HTML の順序を並べ替える: HTML の列の順序を手動で並べ替え、幅の広い画面にプッシュ/プル クラスを適用して、目的のレイアウトを維持できます。
  2. CSS 変換トリック:

    • 行コンテナに CSS 変換を実装して、列の順序を効果的に反転します。
    • 方向修飾子を変換と組み合わせて使用​​することで、適切な水平方向の配置を確保します。
    • 変換はベンダー プレフィックス付きの IE9 でサポートされていることに注意してください。

以上がブートストラップで .col-*-12 列を再配置するためにプッシュ/プル クラスを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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