HTMLのコーディングを爆速にしてくれるBootstrapですが、細かいところを気にするとコードをいじりたくなる時があります。
たとえば「grid同士の間隔(デフォルトでは30px)」とか。
例として、992px以上で複数列になる col-md-* についてgrid間隔を60pxにしたい場合は、こんなstyleを追記すればOKです。
@media (min-width: 768px) { /* 2列のときの間隔調整 */ [class*="col-md-"]:nth-child(2n+1) { padding-right: 30px; } [class*="col-md-"]:nth-child(2n) { padding-left: 30px; } /* 3列のときの間隔調整 */ [class*="col-md-"]:nth-child(3n+1) { padding-right: 30px; } [class*="col-md-"]:nth-child(3n+2) { padding-right: 30px; padding-left: 30px; } [class*="col-md-"]:nth-child(3n) { padding-left: 30px; } /* 4列のときの間隔調整 */ [class*="col-md-"]:nth-child(4n+1) { padding-right: 30px; } [class*="col-md-"]:nth-child(4n+2), [class*="col-md-"]:nth-child(4n+3) { padding-right: 30px; padding-left: 30px; } [class*="col-md-"]:nth-child(4n) { padding-left: 30px; } }
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!