Bootstrap スペース ユーティリティ クラスを使用してレイアウトのマージンとパディングを制御するにはどうすればよいですか?

ブートストラップ スペース ユーティリティ クラスについて

ブートストラップは、要素のマージンとパディングを制御するための包括的なスペース ユーティリティ クラスを提供します。これらのクラスにより、レイアウト内の空白を調整するプロセスが簡素化されます。

構文

スペース ユーティリティ クラスの構文は、さまざまなブートストラップ バージョンで進化しました。

ブートストラップ 4

マージン: m{sides}-{size}
パディング: p{sides}-{size}

ブートストラップ 5

マージン: m{sides}-{size} (me-、ms-、pe を使用) -、 ps-)
パディング: p{sides}-{size}

例

ブートストラップ 4:

<div class="m-b-lg">...</div> <!-- margin-bottom-large -->
<div class="p-t-3">...</div> <!-- padding-top-3 -->

ブートストラップ 5:

<div class="me-3">...</div> <!-- margin-end-3 -->
<div class="ps-1">...</div> <!-- padding-start-1 -->

レスポンシブ スペース

ブートストラップ4 は、ブレークポイントに応答するレスポンシブ スペース ユーティリティ クラスを実装します。構文は次のとおりです:

m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}

例:

<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->

React での使用法

スペース ユーティリティ クラスを使用するにはReact では、要素に className 属性を設定できます。例:

<code class="javascript">import React, { Component } from 'react';

class Example extends Component {
  render() {
    return (
      &lt;div className=&quot;m-b-lg&quot;&gt;
        {/* Your content */}
      &lt;/div&gt;
    );
  }
}

export default Example;</code>

注:

Bootstrap 4 では、スペース ユーティリティ クラスのサポートを有効にするためにプラグインをインストールする必要がある場合があります。詳細については、ブートストラップのドキュメントを参照してください。

以上がBootstrap スペース ユーティリティ クラスを使用してレイアウトのマージンとパディングを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。