ブートストラップは、私は3列などのような2行のデスクトップのレイアウトを持って維持行

Question

ながら2に3列から行きます次のようになります。

<div class="row"> 
    <div class="col-xs-6 col-md-4"> 
    1. Lorem ipsum 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    2. dolor sit<br>amet 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    3. consectetur 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    4. adipisicing<br>incididunt 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    5. elit 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    6. sed reprehenderit 
    </div> 
</div> 

0123：

<div class="row"> 
    <div class="col-xs-6"> 
    1. Lorem ipsum 
    </div> 
    <div class="col-xs-6"> 
    2. dolor sit<br>amet 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-6"> 
    3. consectetur 
    </div> 
    <div class="col-xs-6"> 
    4. adipisicing<br>incididunt 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-6"> 
    5. elit 
    </div> 
    <div class="col-xs-6"> 
    6. sed reprehenderit 
    </div> 
</div> 

だから私の現在のソリューションは、単一のラッピングrowを持っており、ブートストラップは、それはそうのような自然なラッピングだ行うことができるようにすることです

列がすべて同じ高さでない場合（ただし、列が同じでない場合を除く）は正常に動作します。このような状況では、浮動小数点がエレメントに対して捕捉されるレイアウトが壊れます。 https://embed.plnkr.co/eUJCUiGl5VrnTc5Z1c72/

このシナリオの解決策は何ですか：

ここでは、問題のPlunkerの例ですか？

Answer 1

あなたは近づいており、単一のラッピングの<div class="row">要素を使用して適切なアイデアを得ています。必要なのは、特定のブレークポイント値(xs, sm, md, lg)で見えるclearfix要素、以下のとおりです。

<div class="row"> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      1. Multi<br>line<br>content 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      2. Single line 
     </div> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block"></div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      3. Double<br>line 
     </div> 
    </div> 
    <div class="clearfix visible-md-block visible-lg-block"></div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      4. More content 
     </div> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block"></div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      5. Body 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      6. Text<br>with<br>many<br>many<br>lines 
     </div> 
    </div> 
    <div class="clearfix"></div> 
</div> 

これがないことは一定間隔で新しい行を強制的にある - 簡単に使用してプログラム的に挿入することができ、すべての第三<div>（xs/sm他のすべての<div>とmd/lgループ）。 visible-*-blockクラスを指定すると、特定のブレークポイントでのみ<div>がレンダリングされます。つまり、偶発的なスペースが発生することはありません。

あなたがこの（PHP、しかし、任意の言語で行うことができる）を生成するために、ループのより多くの文書Hereやライブの例Here

例を見つけることができます：これは何をします

for($i = 1; $i < 13; $i++){ 
    echo '<div>'.$i.' Words... Blah... Whatever.</div>'; 
    if($i % 6 == 0){ 
    echo '<div class="clearfix"></div>'; 
    } else if($i % 3 == 0){ 
    echo '<div class="clearfix visible-md-block visible-lg-block"></div>'; 
    } else if($i % 2 == 0){ 
    echo '<div class="clearfix visible-xs-block visible-sm-block"> 
    } 
} 

をすべての2回目の繰り返しではclearfixの場合はxs/sm、3回目の繰り返しごとにclearfixの場合はmd/lg、すべての6回目の繰り返しの場合はclearixの両方を印刷します。