Bootstrap 4 Beta では列オフセット クラスはどのように変更されましたか?

Bootstrap 4.0.0-Beta の列オフセット

Bootstrap 4 Beta では、オフセット クラスが更新されたため、「offset-

Offset クラスの変更

Bootstrap 4 Beta では、「offset-md-」クラスは「offset-{breakpoint}-」に置き換えられました。 。」たとえば、中ブレークポイントで列を 2 列オフセットするには、列の配置に "col-md-offset-2."

ml-auto の代わりに "offset-md-2" を使用することになります。

「ml-auto」クラスは、列をできるだけ右に移動して列を整列する新しい方法を提供します。ただし、この自動マージンのアプローチはすべてのシナリオに適しているわけではありません。

カスタム オフセットの回避策

2 列によるオフセットなど、特定の列のオフセットが必要な場合、回避策はダミー列またはプレースホルダー列を使用して、目的の効果を実現します。例:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>

列の中央揃え用の mx-auto

列を中央に配置するには、列の両側に等しいマージンを作成する「mx-auto」クラスを使用します。

<div class="row">
  <div class="col-md-4 mx-auto">
    ...
  </div>
</div>

注: Beta 2 の特定の列オフセット

「offset-md-2」などの特定の列オフセットが Bootstrap 4 Beta 2 で復元されることに注意することが重要です。ただし、「ml-auto」クラスと「mx-auto」クラスは、柔軟な列の配置と中央揃えに引き続き使用できます。

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