@kyanny's blog

Write down what I learnt. Opinions are my own.

Bootstrap 3 グリッドレイアウトの入れ子の正しい書き方

  • .row > .col- > .row > .col- という順番でネストすること。 .row > .col- > .col- のように途中の .row を抜かすと左右の padding が累積されてしまい、縦位置の揃えがずれる。
  • なぜ .row を挟むと縦位置がずれないのかというと、 .row が左右の margin を -15px しているから、 .col- が左右の padding を 15px するのと打ち消し合って 0 になるため。