Bootstrap 4 は、異なる画面サイズにわたる列の順序をどのように処理しますか?

Bootstrap4 での列の順序

さまざまな画面サイズにわたって列を柔軟に配置するために、Bootstrap にはさまざまなオプションが用意されています。

応答性の高い順序ブートストラップで4.0:

Bootstrap 4 では、応答性の高い順序付けクラスに「xs-」プレフィックスの使用が排除されています。代わりに、「push-」および「pull-」修飾子は、ビューポートと列をシフトする単位の数を指定します。たとえば、モバイルで目的の 1-3-2 順序を実現するには:

<div>

Bootstrap 4.1 以降のレスポンシブ順序:

Bootstrap 4.1 ではフレックスボックスが導入されています。列の順序を簡素化します。オーダー クラスの範囲は「order-1」から「order-12」までです。列は、「order-md-12 order-2」(MD では最後、XS では 2 番目):

<div>

代替順序付け方法:

のように、応答的に順序付けできます。

フレックスボックス方向ユーティリティは、応答性の高い順序付けクラスに加えて、別の機能を提供します。アプローチ:

<div>

追加メモ:

• 列の順序は親 .row に相対的です。
• 応答クラスにより詳細な制御が可能オーバーオーダーにより、複数の画面サイズにわたる複雑な配置が可能になります。
• Bootstrap 4.1 4.0 より前のバージョンで使用されていたプッシュ/プル クラスはサポートされなくなりました。

以上がBootstrap 4 は、異なる画面サイズにわたる列の順序をどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。