「col-lg-push」と「col-lg-pull」を使用してブートストラップの 3 つの列を再配置するにはどうすればよいですか?

Twitter Bootstrap 3 でのcol-lg-push およびcol-lg-pull を使用した列の順序の再配置

Bootstrap 3 の列の順序により、開発者は次のことが可能になります。さまざまな画面サイズに合わせて行内の列の位置を調整します。 Col-lg-push クラスとcol-lg-pull クラスは、この目的のために特別に設計されており、大画面デバイス (デスクトップおよびラップトップ) 上の列のレイアウトを制御できます。

列の順序をカスタマイズするには、次のようにします。必要な作業:

1. HTML での順序の定義: HTML マークアップの列の順序を変更します。たとえば、2 番目の 5 グリッド列を最初に表示したい場合は、そのコンテンツをコード内の最初の 5 グリッド列の前に配置します。
2. プッシュ クラスを使用します: 次の列を追加します。 lg-push-5 クラスを右に移動したい列に追加します。このクラスは、列を元の位置から 5 列分プッシュします。
3. プル クラスを使用します: 左に移動したい列に、col-lg-pull-5 クラスを追加します。 。このクラスは、列を左方向に 5 列分引き出します。

例:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'>Second</div>
  <div class='col-lg-5 col-lg-pull-5'>First</div>
  <div class='col-lg-2'>Third</div>
</div>

説明:

この例では、col-lg-push-5 を使用して 2 番目の列が 5 列右にプッシュされます。大きな画面では 3 列目の後に表示されます。最初の列は、col-lg-pull-5 を使用して 5 列分左にプルされ、3 番目の列の前に来ます。これにより、目的のレイアウトが作成されます: [5] (2 番目)、[5] (1 番目)、モバイルでは [2]、デスクトップでは [5] [5] [2]。

プルとプッシュ:

• プル: 列を
• 押す: 列を右に移動します。

注:

• プッシュ クラスとプル クラスは、指定された画面サイズ (この場合は大きいサイズ) での列の順序にのみ影響します。
• Bootstrap はデフォルトでモバイル レイアウトを優先するため、クラスは小さい画面サイズには影響しません。

以上が「col-lg-push」と「col-lg-pull」を使用してブートストラップの 3 つの列を再配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。