[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか？

質問

TwitterのBootstrapを使って縦の空白を追加するのに最適な方法は何ですか？

例えば、ランディングページを作っていて、あるボタンの上下に少し（100px）空白を設けたいとします。もちろん、そのボタンのために特定のクラスを作成することはできます。しかし、Bootstrapでは、ボタンの上下に空白を設けるために DRY は、垂直方向の空白を追加する方法です。

解決方法は？

で ブートストラップ4/5 があり、スペーシングを利用することができます。 BS4 , BS5 ).

ドキュメントからの抜粋です。

すべてのブレークポイントに適用されるスペーシングユーティリティ、から xs から xl , には、ブレークポイントの省略形がありません。これは、これらのクラスが から適用されます。 min-width: 0 となり、そのため メディアクエリ しかし、残りのブレークポイントには ブレイクポイントの省略形

クラスは、以下のフォーマットで命名されます。 {property}{sides}-{size} に対して xs と {property}{sides}-{breakpoint}-{size} に対して sm , md , lg および xl .

ここで プロパティ のいずれかである。

• m - を設定するクラスに対して margin
• p - を設定するクラスに対して padding

どこ 側面 のいずれかを指定します。 BS4とBS5の違いにご注意ください ):

• t - を設定するクラスに対して margin-top または padding-top
• b - を設定するクラスに対して margin-bottom または padding-bottom
• l - を設定するクラスに対して margin-left または padding-left (Bootstrap 4)
• s - を設定するクラスに対して margin-left または padding-left (Bootstrap 5)
• r - を設定するクラスに対して margin-right または padding-right (Bootstrap 4)
• e - を設定するクラスに対して margin-right または padding-right (Bootstrap 5)
• x - の両方を設定するクラスでは *-left と *-right
• y - の両方を設定するクラスでは *-top と *-bottom
• ブランク - margin または padding 要素の4辺全てに

どこ サイズ のいずれかである。

• 0 - を設定することで、マージンやパディングを排除するクラスがあります。 0
• 1 - を設定するクラスでは、（デフォルトで margin または padding から $spacer * .25
• 2 - を設定するクラスでは、（デフォルトで margin または padding から $spacer * .5
• 3 - を設定するクラスでは、（デフォルトで margin または padding から $spacer
• 4 - を設定するクラスでは、（デフォルトで margin または padding から $spacer * 1.5
• 5 - を設定するクラスでは、（デフォルトで margin または padding から $spacer * 3

つまり、ある要素の上下に余分な縦スペースを設けるには my-5 クラスがあります。