5

したがって、これは完全に機能します (小さな画面では 4 列から 2 列になります):

<div class="row">
    <div class="col-lg-3 col-sm-6"> 1</div>
    <div class="col-lg-3 col-sm-6"> 2</div>
    <div class="col-lg-3 col-sm-6"> 3</div>
    <div class="col-lg-3 col-sm-6"> 4</div>
</div>

私の 3 列と同様に、ただし、中央の列は 3 番目の列の上に積み上げられます (それまでは右/2 列目)。

<div class="row" id="footer">
    <div class="col-lg-3 col-sm-6">
        1
    </div>
    <div class="col-lg-3 col-sm-6">
        2
    </div>
    <div class="col-lg-6 col-sm-6">
        3
    </div>
</div>

最初の列の上または下にスタックするように中央の列を指定するにはどうすればよいですか? たとえば、col-sm-pull-6 は機能しません。

望ましい結果:

1 - 3
2 - ..

2 と 3 を切り替えてからプッシュとプルを使用する場合の問題は、2 番目の列が 3 番目の列の上に移動することです。そして、それらが私の望ましい結果の「図」のようになる必要があります。

編集: 私にできることは、最初の列 col-sm-12 を指定することです。これにより、他の2つが押し下げられます。そうすれば順番もいいし、フッター用なので段落欄が一番下にあるのも悪くない。しかし、私はまだより良い提案を受け入れています。

グリッドは次のようになります。

1
2 - 3
4

2 に答える 2

2

高さが異なる div に注意してください。これらは、あなたが期待するように物事が左に完全に折り返されない原因となります.

次のようなブートストラップ clearfix を (条件付きでも) 使用して、これに対処できます。

<div class="clearfix visible-sm"></div>

-sm サイズで新しい行を開始する div の後に配置します。必要に応じて繰り返します。

于 2016-09-17T02:32:00.267 に答える
1

ですから、ここに行きます、

まず第一に、次のように大きな画面の前に小さな画面用のデザインを使用する必要があります。

<div class="col-sm-6 col-lg-3"> (...)

デザインを実現するには、次のことを行う必要があります。

<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>

...私がしたことは、2番目と3番目の列を逆にして、小さな画面のニーズに合わせてから、プッシュとプルを使用して大きな画面に調整したことです.

編集：ここに実用的なフィドルがあります：

http://jsfiddle.net/ujrwyrbr/2/

于 2014-10-19T00:23:18.270 に答える