Bootstrap 4 で列をオフセットするにはどうすればよいですか?

Bootstrap 4 の列オフセット手法

Bootstrap 4 では、列をオフセットするための更新された手法が導入されています。 「offset-md-*」クラスを使用する以前の方法は、ベータ 1 で削除されました。

.ml-auto および .mr-auto の導入

新しいこのアプローチでは、「.ml-auto」クラスと「.mr-auto」クラスを利用します。これらのクラスは、マージンを自動的に調整して行内で列を左または右に移動します。

ダミー列を使用したカスタム オフセット

カスタム列オフセットを実現するには、「ダミー」列のプレースホルダーを使用できます。たとえば、「col-md-4」列を 2 単位オフセットするには、次を使用します。

<div>

.ml-auto および .mr-auto を使用した列の中央揃え

隣接する 2 つの「col-md-4」列を中央に配置するには、左の列に「.ml-auto」を適用し、右の列に「.mr-auto」を適用します。

<div>

中心配置に .mx-auto を使用する

「col-md-4」列を中央に配置するには、「.mx-auto」を適用します:

<div>

注: 特定の列オフセットは Bootstrap 4 Beta 2 で復元されます。

以上がBootstrap 4 で列をオフセットするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。