ブートストラップ グリッドの列間に余分なスペースを追加するにはどうすればよいですか?

ブートストラップを使用してグリッド列間に余分なスペースを作成する

ブートストラップ グリッド レイアウトの列間に追加のマージンとパディング スペースを追加すると、視覚的な魅力が向上します。あなたのウェブサイトの。変更されたcol-md-5クラスでプル左とプル右を使用することはオプションですが、過剰なギャップが生じる可能性があります。

より洗練された解決策は、各列内にネストされた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 サイトの他の関連記事を参照してください。