レイアウトを壊さずにブートストラップ列の間にマージン/パディングを追加する方法は?

Bootstrap で列間にマージン/パディング スペースを追加する方法

Bootstrap を使用して Web サイトをデザインする場合、列間に余分なマージンまたはパディング スペースを追加する必要があるのが一般的です。 。これを達成しようとしているときに、一部のユーザーは満足のいく結果に遭遇しませんでした。

一般的な方法の 1 つは、プル左またはプル右を使用して列クラスをcol-md-5 に変更することです。ただし、このアプローチでは大きすぎるギャップが生じる可能性があります。

より効果的な解決策は、元の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>

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

このメソッドを使用すると、必要なマージンとパディング スペースを簡単に追加できます。列のレイアウトを損なうことなく、列の間に配置できます。この手法により柔軟性が高まり、要素間の間隔を正確に制御できるようになります。

以上がレイアウトを壊さずにブートストラップ列の間にマージン/パディングを追加する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。