ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップ グリッド レイアウトで列間にスペースを追加するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-04 18:15:02552ブラウズ

How to Add Spacing Between Columns in Bootstrap Grid Layout?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。