【Bootstrap】グリッドシステムを使用して余白を調整する

bootstrapアイコン プログラミング
まさお
Bootstrapのグリッドシステムって「便利」と聞くけれど、実際は使いやすいの?

Bootstrapの使い方

html

Bootstrap-グリッドシステムで余白を調整する方法

CSSフレームワークである、「Bootstrap」を使ってレイアウトを学習中にグリッドを使う機会が何度もありました。

なかでも苦戦したのが、「カラム間の余白について」です。

「Bootstrap カラム 余白」 などでググってみても、自分が実現したい答えを探し出すのに苦労しました。

Bootstrapのグリッドシステムは使い勝手がいい反面、調整が結構シビアであるような気もします。

もしかしたら僕が使い慣れていないだけかもしれませんが。

同じ箇所でつまづいている方に少しでもお役に立てればとの思いいで書きました。

前置きはこの辺で。

グリッドシステムで余白を作る

ポイントは3つ。

  1. .col-3 でdiv要素を4つ横並びにする
  2. body {width: 960px;} はそのままで余白をとる
  3. .col-3 の下層にdiv要素を追加して、paddingをあてる

Bootstrap-グリッドシステムを使用して余白を設定しない場合

See the Pen
.containerスペースなし
by ma3onousagi (@ma3onousagi)
on CodePen.

通常の「.container」、「.row」、「.col-X」と設定すると、余白のないカラムが生成されます。

<div class="container">
  <div class="row">
    <div class="col-3">
      <a href="">ABC</a>
    </div>
  </div>
</div>

やり方は色々あるはずですが、私は簡単な下記の余白を入れる方法を選びました。

Bootstrap-グリッドシステムで余白を設定したい場合

See the Pen
containerスペースあり
by ma3onousagi (@ma3onousagi)
on CodePen.

ポイントは「.col-3」の下層に「div」タグを追加するのみ

あとは、CSSで「.col-3」に、padding(今回は余白を強調するために2%)をあてるだけ。

<div class="container">
  <div class="row">
   <div class="col-3 cell-list">
    <div id="cell">
     <a href="">ABC</a>
    </div>
  </div>
 </div>
</div>

CSSはこんな感じです

.cell-list {
  padding: 2%;
} 

Boostrap初心者のわたしがつまづいたポイントを残しておきます。

ご参考までにどうぞ。