プッシュ/プルを使用してブートストラップで .col-*-12 列を並べ替える方法

ブートストラップでの .col-*-12 のプッシュ/プルによる列の並べ替え

ブートストラップでは、プッシュ ディレクティブ クラスとプル ディレクティブ クラスを次のように指定できます。周囲の柱に対する柱の配置を調整するために使用されます。ただし、幅が 12 の列 (つまり .col-*-12) の場合は、プッシュ/プルで順序を直接変更できないことに注意することが重要です。

これは、幅の合計が変更されるためです。 2 つの列のうち、Bootstrap で指定されているデフォルトの 12 列のグリッド幅を超えています。代わりに、これらの列の順序を変更するには、

1 の 2 つの方法があります。 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>

2. CSS 変換を使用して垂直方向の並べ替えを行う

または、CSS 変換を使用して、列が小さい画面で垂直方向に積み重ねられている場合に列の順序を逆にすることもできます。

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

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

CSS は次の点に注意してください。変換は IE9 以降でサポートされているため、互換性のためにベンダー プレフィックスを含める必要がある場合があります。

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