ブートストラップで列間のマージンとパディングを制御するにはどうすればよいですか?

Bootstrap を使用した列のマージンとパディングの管理

Bootstrap のグリッド レイアウトを使用する場合、列間のスペースを調整することが望ましい場合があります。これは、追加のマージンとパディングを組み込むことで実現できます。

一般的なアプローチの 1 つは、col-md-5 などのオプションを pull-left および pull-right とともに使用して、列のクラスを変更することです。ただし、この手法ではスペースが過剰になる可能性があります。

別の解決策は、各col-md-6列内にネストされたdiv要素を作成することです。列のバックボーンはそのまま残り、ネストされた div には必要なマージンとパディングを割り当てることができます。

例:

HTML:

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

CSS:

<code class="css">.classWithPad {
  margin: 10px;
  padding: 10px;
}</code>

このアプローチにより、グリッド レイアウトを損なうことなく、列間の間隔を正確に制御できます。

以上がブートストラップで列間のマージンとパディングを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。