19

私はTwitter Bootstrap v3を使用しており、列の順序付けとオフセットを使用して、要素をレスポンシブに並べ替えたいと考えて います。

これが私の要素を使用したい方法です。-xsまたはブレークポイントで-sm、含まれる div が 4 行に積み上げられます。

ここに画像の説明を入力

-mdまたはブレークポイントで-lg、含まれる div が 2 行に積み上げられます。

ここに画像の説明を入力

これは現在のコードです - 私はクラスを含む div にクラスを設定する方法を知っていますが、A、B、C には設定しません:

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

Bootstrap 3 の列の順序とオフセットを使用して、A、B、および C を正しい順序で取得する方法がわかりません。それは実際に可能ですか？

これは、私がJSFiddleを使用している限りです: http://jsfiddle.net/3vYgR/

4

4 に答える 4

23

Bootstrap 4またはBootstrap 5のユーザーは、この質問を見たいと思うでしょう: Bootstrap change order of columns

ブートストラップ 3 (元の回答)

pushとpullクラスを見たいと思います...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

デモ: http://bootply.com/77853

于 2013-08-29T17:23:07.907 に答える
1

これについてより伝統的な方法を使用しない理由。B を左に、その他の要素を右にフローティングしますか?

これを jsfiddle の現在の CSS に追加した場合のように:

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

http://jsfiddle.net/E6BFk/を参照してください

Bootstrap の列の順序付けがスタック効果を達成できるかどうかはわかりませんが、おそらく再順序付けのみです...ドキュメントはその機能についてかなりスリムですが。

于 2013-08-29T15:59:05.657 に答える
0

Skellyの回答に示されているようにプッシュ/プルを試みましたが、高さが適用されるとCは新しい行になります: http://www.bootply.com/Q3djHYawgb#

小さいサイズで表示したときに B を最初に表示できる場合は、右側の列内に A と C を含む行を作成する方が理にかなっていると思います。

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

http://jsfiddle.net/hoodoo99/L2BE9/を参照してください

于 2014-08-05T22:56:17.377 に答える
0

@skelly が提供する回答は出発点としては最適ですが、垂直方向の配置の問題が発生します。Aが縦長のdivで、Cが A の下に垂直に配置されているとします。

[A] [B]
[ ]
    [C]

また、これをさらに一歩進めたい場合は、clearfixブロックの使用も検討する必要があるかもしれません。例えば;

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

なしclearfix md、またはlg次のようになる可能性があります。

[A] [B]
    [C] [D]

これは、最後の「列」に 2 つ以上の要素が必要な場合、または要素の高さが他の要素の整列を乱し始める場合に特に重要です。

clearfix mdorを使用すると、次のlgようになります。

[A] [B]
    [C]
    [D]

フィドルの例: http://jsfiddle.net/L5174o8d/

于 2015-02-04T08:34:22.667 に答える