Bootstrap の Spacing Utility クラスは Bootstrap 4 および 5 でどのように変更されましたか?

Bootstrap でスペーシング ユーティリティ クラスを使用するにはどうすればよいですか?

記事で、m-b- などの Bootstrap 4 のスペーシング ユーティリティ クラスについて説明しました。 lg は、React MeteorJS アプリケーションに実装しようとしましたが、成功しませんでした。明確にするために、Bootstrap のスペーシング ユーティリティの使用法と更新を調べてみましょう。

Bootstrap 5 (beta 2021)

Bootstrap 5 では RTL サポートが導入されて以来、左右の概念がstart と end に置き換えられ、l- および r- スペース ユーティリティが変更されました:

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = me-*

ブートストラップ4 (Update 2020)

Bootstrap 4 のスペース ユーティリティは、アルファ版リリース以来進化しました。更新された構文は次のとおりです:

• Margins: m{sides}-{size}
• Padding: p{sides}-{ size}

例:

• mb-2 = マージンの下 2 間隔単位
• m-0 = マージンなし
• pt-3 = 上部の 3 つの間隔単位をパディング
• p-1 = すべての側面をパディング 1 つの間隔単位

ブートストラップ 4 は、デフォルトの.5remスペーサーユニット。さらに、x 軸 (左/右) および y 軸 (上/下) ユーティリティを指定できるようになりました:

• my-2 = 上と下の 2 つの間隔単位のマージン
• mx-0 = 左右のマージンなし
• px-3 = 左右に 3 つの間隔単位でパディング

さらに、これらの間隔ユーティリティは応答性が高く、最小のブレークポイント (xs) ) ブレークポイントが指定されていない場合は暗黙的に指定されます:

• mt-md-2 = マージン上部 2 間隔単位、md (および上)
• py-sm-0 = 上部パディングなし& 下部、SM (および上)

以上がBootstrap の Spacing Utility クラスは Bootstrap 4 および 5 でどのように変更されましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。