ブートストラップでのスペース ユーティリティ クラスの使用

ブートストラップでは、スペース ユーティリティ クラスを使用して要素の周囲の間隔を簡単に制御できます。ただし、それらの使用中に問題が発生した場合は、ここにあるガイドを参照してください。

更新された間隔構文 (Bootstrap 4 および 5)

Bootstrap 4 では、スペースユーティリティクラスの簡略化された構文:

Margins:
m{sides}-{size}

Padding:
p {sides}-{size}

例:
mb-2 = マージン下 2 間隔単位
p-1 = すべての側面に 1 間隔単位のパディング

ブートストラップ 5 には次のものが含まれますRTL サポートにより、方向固有のプレフィックスが変更されます:

*pl-* = ps-* (start)
*pr-* = pe-* (end)
*ml- * = ms-* (開始)
*mr-* = me-* (終了)

応答間隔

特定のブレークポイントに間隔を適用できるようになりました次の構文を使用します:

Margins:
m{sides}-{breakpoint}-{size}

Padding:
p{sides}-{breakpoint}-{size}

例:
mt-md-2 = 中画面以上では上部 2 つの間隔単位をマージンします

React を使用した MeteorJS の例

React で MeteorJS を使用している場合は、bootstrap-spacer パッケージがインストールされていることを確認してください:

meteor npm install bootstrap-spacer

次に、スペース ユーティリティ クラスをコンポーネントにインポートします。

import { spacers } from "bootstrap-spacer";

標準 HTML と同じようにユーティリティ クラスを使用します。

  ...

トラブルシューティング

• スペース クラスが機能しない場合は、bootstrap-spacer パッケージがインストールされ、コンポーネントにインポートされていることを確認してください。
• 使用しているクラス名が更新された構文と一致していることを確認してください。
• 追加情報と例については、関連ドキュメントを確認してください。