Bootstrapでgridの間隔を変更する方法

公開日:2018-11-20
最終更新:2018-11-20
※この記事は外部サイト(https://note.mu/oceant/n/n42359b94cb70)からのクロス投稿です

新規にBootstrapベースでサイトを作ることも少なくなってきたとは思いますが、既存のWordPressテーマをカスタマイズする際に必要となることは多くあると思います。

Bootstrapで最も利用頻度が高いのがgridシステムですが、最大の欠点は要素同士の間隔が固定されてしまっていること。gridは使いたいけど間隔を狭くしたい、広くしたいというときには以下のcssを追加しておくことで簡単に対応できます。

CSS

// 要素間を40pxにしたい場合
.gutter-40.row {
  margin-right: -20px;
  margin-left: -20px;
}
.gutter-40 > [class^="col-"], .gutter-40 > [class^=" col-"] {
  padding-right: 20px;
  padding-left: 20px;
}

HTML

<div class="row gutter-40">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

.gutter-40のようなclassを必要なサイズ分準備しておき、それをrowクラスと一緒に指定してあげるだけで、好きな場所に好きな間隔のgridを設置することができます。

CSSの指定をちゃんと見ていただければわかりますが、colの指定はclassの最初に記載するようにしてください。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@oceant'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする