Bootstrap 4.0.0 ベータ版で希望の列オフセットを実現するにはどうすればよいですか?

ブートストラップ列オフセットのジレンマが解決されました

ブートストラップ v4.0.0-beta では、以前に使用されていた offset-md- * 列オフセットのクラスは削除されました。ドキュメントでは、代わりに .ml-auto を使用することを提案しています。ただし、このアプローチでは予期しない動作が発生し、列が意図した量ではなく 4 オフセットされます。

この不一致は、Bootstrap 4 の新しいフレックスボックス ベースのレイアウト システムから発生します。オフセット クラスは関連しなくなりました 列の柔軟性によるものです。カスタム オフセットを実現するには、次の解決策を検討してください。

1. プレースホルダー列:

   • 目的のオフセット サイズのダミー列を追加します。オフセット列用のスペースを作成します。

2. 自動マージン (ml/mr-auto):

   • 複数の列を中央揃えにする: オフセット列を 2 で割って、ml-auto と mr-auto を各列に適用します。
   • 単一の列を中央揃えにする: mx-auto を使用して均等に作成します。

今後の変更点:
Bootstrap 4 のベータ 2 では特定の列オフセットが再導入されることに注意することが重要です。これにより、offset-md-2 などのクラスを使用して正確な列の変位を実現できるようになります。

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