ブートストラップ グリッド間隔の微調整

ブートストラップ グリッド レイアウトでは、列間の間隔に関する課題に直面しています。プル左およびプル右で Col-md-5 を使用する解決策ではスペースが大きくなりすぎる可能性がありますが、より微妙なアプローチが利用可能です。

解決策: 列内に Div をネストする

各col-md-6列内でdivをネストし、ネストされたdivに必要なマージンとパディングを適用します。このアプローチでは、列の構造的完全性を維持しながら、各列内に追加のスペースを確保できます。

コード:

    

        
Widget 1
    
    

        
Widget 2
    

CSS:

.classWithPad {
    margin: 10px;
    padding: 10px;
}

このソリューションを使用すると、グリッド レイアウトの構造的な一貫性を犠牲にすることなく、列に必要な間隔を簡単に追加できます。