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