ウェブノウハウ

WEB KNOWHOW

Bootstrapをフル活用する!Web制作

Bootstrapのgridの間隔を簡単に調整するCSS

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;
	}
}

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!