9

表示するアイテムの数が不明で、それぞれが独自の列内にある場合、それぞれに新しい行を作成することなく、それらを均等に折り返す方法はありますか?

私は持っている

<div class="row">
    <!-- 1st col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Short</p></div>
    <!-- 2nd col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem</p></div>
    ...
    <!-- nth col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem that might be long</p></div>
</div>

列の高さがさまざまであるため、列が不均等に分散されることがあります。

ここに画像の説明を入力

CSSだけで、列を常に4列（中）、3列（小）、または2列（極小）の行に折り返すことは可能ですか、それともJSが必要になるか、いくつかを使用する必要がありますか新しい行を作成するためのサーバー側プログラミング?

4

4 に答える 4

13

あなたの問題を正しく理解していれば.clearfix、1 行に収める必要がある要素の各セットの後に、それに応じて適用するだけで十分なはずです。

例を確認する

別の解決策は、メディア クエリと組み合わせて CSS:nth-child疑似クラスを使用することです。解像度ごとに、新しい行を作成する を含む異なるn-th要素が存在します。clear:both

:nth-child の使用方法の簡単な概要をご覧ください。

于 2013-11-12T01:03:53.940 に答える
2

レスポンシブ列リセットを使用: http://getbootstrap.com/css/#grid-responsive-resets

12 の異なるイベントを表示するイベント ビューアを作成していました。ラージ モードでは、4x3、ミディアム 3x4、スモール 2x6、および x-スモールを積み重ねるだけでした。

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

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

       <div class="col-lg-3 col-md-4 col-sm-6">Text 3</div>

          <div class="clearfix visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 4</div>

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

       <div class="col-lg-3 col-md-4 col-sm-6">Text 5</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 6</div>

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

       <div class="col-lg-3 col-md-4 col-sm-6">Text 7</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 8</div>    

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

       <div class="col-lg-3 col-md-4 col-sm-6">Text 9</div>

          <div class="clearfix visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 10</div>    

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

       <div class="col-lg-3 col-md-4 col-sm-6">Text 11</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 12</div>
</div>
于 2016-04-28T20:24:27.680 に答える
2

残念ながら、それはグリッドの仕組みではありません。石積みのようなものを使用するか、php を使用してブレークポイントごとに異なるコンテナーを生成することができます。例えば：

<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>
于 2013-11-12T00:39:29.120 に答える