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

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

問題:

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

解決策:

プッシュ/プルの制限:

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

代替アプローチ:

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

2. CSS 変換トリック:

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

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