ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップ グリッド レイアウトで列間にスペースを追加するにはどうすればよいですか?
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 サイトの他の関連記事を参照してください。