Update!

CSS3: Bootstrap4 グリッドレイアウトの概要メモ

Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。
今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。

目次

  • グリッドオプション
  • まとめ

グリッドオプション

Extra small (<576px) Small (≥576px) Medium (≥768px) Large(≥992px) Extra large(≥1200px)
Grid behavior 常時水平レイアウト
折りたたまれた状態で開始、ブレークポイントで水平レイアウト
.container の最大幅
None (auto)
540px
720px
960px
1140px
プレフィックスクラス .col- .col-sm- .col-md- .col-lg- .col-xl-
オフセットクラス .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl-
カラム(列)の分割数
12
レイアウトの間隔
30px (各セルの両端 15px 間隔)

まとめ

今回、サンプルコードを掲載したかったのですが、サイト構造の問題で BS4 でのコーディングができませんでした。。
みなさんもこういったことのないように、定期的にコードを見直し、時代に合わせてアップデートしていきましょう。

近々 DB を含めたサイトの再構築を行いたいと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents