MENU
コンテンツ再構築中

CSS3: Bootstrap4 グリッドの offset が効かない場合の対処

Bootstrap でのグリッドレイアウト時、空白部分が発生する場合に col-xx-offset-x を利用すると思いますが、バージョン4では反映されなくなっています。
offset の概念がなくなったわけではなく、バージョン4 よりクラス名が変更されているだけですので、メモしておきます。

INDEX

目次

  • Bootstrap グリッド offset について
  • まとめ

Bootstrap グリッド offset について

以下のようにクラス名が変更されています。

Bootstrap3

[code]
col-{prefix}-offset-{columns}
[/code]

例)sm, offset 4 の場合のサンプル

[code]
col-sm-offset-4
[/code]

Bootstrap4

[code]
offset-{prefix}-{columns}
[/code]

例)sm, offset 4 の場合のサンプル

[code]
offset-sm-4
[/code]

まとめ

Bootrstrap4 では他にも色々なクラス名が変更されています。
Bootstrap は CSS フレームワークとしてはデファクトスタンダードですので、既存コードの対応が必要な方は早めに修正してくことをお勧めします。

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

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX