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

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

目次

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

Bootstrap グリッド offset について

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

Bootstrap3

col-{prefix}-offset-{columns}

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

col-sm-offset-4

Bootstrap4

offset-{prefix}-{columns}

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

offset-sm-4

まとめ

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

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

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

img_sqn_00

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

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

Related Contents

Pickup Contents