bootstrapのcol-md-Xってなに?抑えておきたい概念。

bootstrapのテンプレートを使ってみたけど、col-md-Xってなんだろう…?

bootstrapのcol-md-Xについて

col-md-X

  • グリッドシステムで使われる。
  • レイアウトを格子状に分解して配置する。
  • 横幅を12分割として考えられる。

なので、横に2つだとcol-md-5, col-md-7 というセットな感じで使われる。

12未満の場合は左詰め。

col-md-Xの[md]とは?

mdの部分はプレフィックスのブレークポイントによって値が変わる。

mdはPCの幅(992 ~ 1119px)を下回ると縦並びになる。

  • xm : スマホ対応(常に同じ)
  • xm : タブレット対応 (768 ~ 991pxを下回ると縦並び)
  • md : PC対応(992 ~ 1119pxを下回ると縦並び)
  • lg : PC大画面(1120pxを下回ると縦並び)

このような感じで指定を変えれば横並び、縦並びの位置が変えられる。

まずは、12分割という概念だけは抑えて置いたほうが良さそう。

覚書ですが、何か参考になれば幸いです。