ホームページ > ウェブフロントエンド > CSSチュートリアル > Bootstrap 4 Beta では列オフセット クラスはどのように変更されましたか?

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

Linda Hamilton
リリース: 2024-11-07 05:46:03
オリジナル
322 人が閲覧しました

How have column offset classes changed in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート