ホームページ  >  記事  >  ウェブフロントエンド  >  Bootstrap 4.0.0 ベータ版で希望の列オフセットを実現するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-09 08:26:02639ブラウズ

How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?

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

ブートストラップ 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。