プッシュ/プル クラスは等しい幅のブートストラップ列に使用できますか?

等しい幅要素のプッシュ/プルによるブートストラップ列の並べ替え

ブートストラップのグリッド システムを使用する場合、列の順序を調整することが重要ですレスポンシブなレイアウト用。ただし、プッシュ/プル ディレクティブを使用して同じサイズの列を並べ替えるのは難しい場合があります。

Can Push/Pull Be Used for .col-*-12 Elements?

いいえ、「.col-xs-12.col-xs-push-12」や「.col-xs-12.col-xs-pull-12」のようなクラスでは列の順序を変更することはできません。結合された幅は、ブートストラップの 12 列グリッド定義を超えています。

代替ソリューション:

1. 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;
  }

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

注: CSS 変換は次のとおりです。ベンダー プレフィックス付きの IE9 でサポートされています。

以上がプッシュ/プル クラスは等しい幅のブートストラップ列に使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。