ホームページ > ウェブフロントエンド > CSSチュートリアル > プッシュ/プル クラスは等しい幅のブートストラップ列に使用できますか?

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

Mary-Kate Olsen
リリース: 2024-11-03 08:55:29
オリジナル
586 人が閲覧しました

Can Push/Pull Classes Be Used for Equal-Width Bootstrap Columns?

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

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート