Bootstrap 4 ベータ版でカスタム列オフセットを実現するにはどうすればよいですか?

ブートストラップの列オフセットが機能しない: 解決策

ブートストラップ 4 ベータ版では、列オフセットが開発者にとって懸念の原因になっているようです。以前に使用されていた offset-md-* クラスはドキュメントに従って削除されました。ただし、この問題はベータ 2 で一時的に解決され、使い慣れたオフセット クラスが復活しました。

ただし、ベータ 1 では、.ml-autoクラス。このメソッドは確かに col-md-4 列を置き換えることができますが、4 列のオフセットが生じます。これはほとんどの開発者が求めているものではありません。彼らは以前の

のようなカスタマイズされたオフセットを望んでいます。代わりに

を使用することは効果がないことが判明しました。したがって、これはバグですか? それとも実行可能な回避策はありますか?幸いなことに、この問題はオフセット クラスの復元により修正されました。それにもかかわらず、ベータ 1 で導入された新しい自動マージンは引き続き列オフセットに使用できます。これらのマージンにより、列が可能な限り右に移動します。したがって、オフセットの量は利用可能なスペースによって異なります。

col-md-4 の右側に他の列がない場合は、行の右側全体を占めます。

代替ソリューション

あるいは、ダミー列を実装して 2 列を実現することもできます。 offset:

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

2 つの

col-md-4 列を中央に配置するには、ml-auto と mr-auto の組み合わせを使用できます。

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

最後に、単一の要素を中央に配置します。

col-md-4 列では、両側のマージンを均等にするために mx-auto を使用します。

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

注:列オフセット クラスはベータ 2 で再導入されます。

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