プッシュとプルを使用して .col-*-12 のブートストラップ列を並べ替えることはできますか?

プッシュとプルを使用した .col-*-12 によるブートストラップ列の再編成

ブートストラップ グリッド レイアウトの領域では、インスタンスに遭遇する可能性があります。小さい画面 (モバイル デバイス) では、.col-xs-12 クラスを使用して列の順序を変更する必要があります。このシナリオでは、従来のプッシュ ディレクティブとプル ディレクティブが直接的な解決策を提供しない可能性があることを理解することが重要です。

プッシュ/プルを使用して .col-*-12 を使用して列を並べ替えることはできますか?

いいえ、.col--push-12 クラスと .col-*-pull-12 クラスを使用して .col--12 列を並べ替えることはできません。これは、これらの列の合計幅が定義された 12 列グリッドを超えているためです。

.col-*-12 列を並べ替える代替アプローチ:

• HTML の列の並べ替え: HTML マークアップ内の列の順序を変更し、より大きな画面サイズで順序付けクラスを使用できます。例:

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

• CSS 変換を使用して垂直列の順序を反転する: この方法では、CSS 変換を使用して、小さい画面で列の順序を回転します。

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl;
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr;
  }
}</code>

注: CSS 変換は IE9 以降でサポートされていますが、ブラウザ間の互換性のためにベンダー プレフィックスを含めることを忘れないでください。

以上がプッシュとプルを使用して .col-*-12 のブートストラップ列を並べ替えることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。