ブートストラップ グリッド レイアウトで列間にスペースを追加するにはどうすればよいですか?

Bootstrap グリッド レイアウトでの列の間隔

Bootstrap で列間に余白やパディングを追加してスペースを作成するのは難しい場合があります。列の配置に影響を与えずにこれを実現するには、次の手順に従います。

列内に内部 Div を作成する

col-md-6 要素内に div を作成して適用します。必要なマージンとパディングを設定します。この div は、必要な間隔を確保しながら列の背骨として機能します。

<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 サイトの他の関連記事を参照してください。