Bootstrap 4 ベータ: 列オフセットの削除と復元

Bootstrap 4 は、ベータ 1 リリースで、その方法に大幅な変更を導入しました。柱がオフセットされました。ただし、その後の Beta 2 リリースでは、これらの変更は元に戻されました。

offset-md-* から ml-auto

Bootstrap 4 Beta 1 では、 offset-md-* クラスは削除されました。代わりに、開発者は .ml-auto クラスを使用して列をオフセットすることが推奨されました。ただし、この方法では、以前のアプローチと同じレベルの精度は得られませんでした。

ベータ 2 でのオフセット クラスの復元

幸いなことに、ベータ 2 では、オフセット クラスが復元されました。新しい構文では、offset-{breakpoint}- という形式が使用され、以前のcol-{breakpoint}-offset- 構文が置き換えられます。

Custom Offsetting

現在非推奨になっている

  <div>

ml-auto と mr-auto を使用する

2 つの隣接する列を中央揃えにするには、開発者は、ml-auto と mr-auto を両方の列に適用できます。

    <div>

mx-auto の使用

単一の列を中央揃えにするには、開発者は mx-auto を使用して両側に均等なマージンを作成できます。

結論

Bootstrap 4 での列オフセットの削除と復元により、開発者に一時的な混乱が生じました。ただし、ベータ 2 で特定のオフセット クラスが再導入され、回避策が利用できるようになったことで、開発者は引き続きブートストラップ 4 でカスタム列レイアウトを実現できます。