4

こんにちは、Bootstrap 3 で列の順序付けを行うインターフェイスを作成していましたが、この問題が発生しました。

これにより2つの列があります：

LG: 列A 列B

MD: 列A 列
       B

しかし、私はこれが必要です:

LG: 列A 列B

MD: 列
       B 列A

MD解像度でdivを並べ替えるにはどうすればよいですか? プルとプッシュを試してみましたが、運がありません:(

前もって感謝します...

これが私のコードです：

<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-push-0 col-lg-9">
        ColumnA
    </div>

    <div class="col-xs-12 col-md-12 col-lg-pull-0 col-lg-3">
        ColumnB
    </div>
</div>

4

2 に答える 2

-1

提案がありますが、完璧な解決策ではないかもしれませんが、これらの 2 つの列を並べ替えるだけでよい場合に使用できます。

  1. 使用したコード( push )と( pull )から削除します。
  2. 元のコードの下にコードの別のコピーを作成します。
  3. ここで重要なことは、Bootstrap が提供するレスポンシブ ユーティリティを使用することです。
  4. この 2 つのクラス( .visible-xx )と( .hidden-xx ) と(xx : xs, sm, md, lg)を使用するだけです。
  5. 元のコードでそれらを使用すると、必要な解像度で必要な列を表示または非表示にできます。

例えば：

 LG: ColumnA -- .visible-xx or .hidden-xx  ( at the needed resolution )
     ColumnB -- .visible-xx or .hidden-xx  ( at the needed resolution )

次に、この 2 つのクラスを使用する必要なコードは次のようになります。

MD: ColumnB  -- .visible-xx or .hidden-xx  ( at the needed resolution )
    ColumnA  -- .visible-xx or .hidden-xx  ( at the needed resolution )

** 次のように、コピー内のコードの順序を変更することを忘れないでください。

<div class="row">
   <div class="">
      ColumnB
   </div>

   <div class="">
      ColumnA
   </div>

重要：

修飾子クラスを使用する.col-md-push-*ことをお勧めします。可能であれば、Bootstrap ドキュメントの列順序セクション.col-md-pull-*を参照してください。うまくいかない場合は、別の方法を使用できます。

したがって、最初にこれを試すことができます：

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        Column B will be here
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        Column A will be here
    </div>
</div>

これがあなたを助けることを願っています。

于 2013-10-05T01:15:41.750 に答える