2列グリッドの長いテキストコンテンツをブートストラップと整列させる方法は？

Question

Aにはいくつかの要素を持つjson配列があります。コンテンツは可変長のフルテキストとして提供されます。

グリッドの要素を2つの列に揃えたいとします。しかしどうですか？

<div class="row"> 
    <div class="col-sm-6" ng-repeat="text in texts"> 
     <div>{{text}}</div> 
    </div> 
</div> 

結果：レイアウトはほとんど大丈夫ですが、それは次の構造例を示しています。ここでは

------------- 
AA | BB 
     | BBBB 
------------- 
CC | DD 
CCCC |------ 
CC | EE 
     | EEEE 
     | EE 

最後の要素「E」が以下「C」ではないD」の下に配置する必要があります"しかし、そうではありません。どうして？私のグリッド定義は間違っていますか？

Answer 1

problemは、ブートストラップがfloat:leftを使用するため、より短い列が背の高い列の右側に引かれるために発生します。

は、この問題を解決するには2つの方法...

1）ClearfixはDIVすべての12個のcol-*単位を "リセット" があります。毎回2回後にあなたの場合に。col-sm-6。これはdocumentedのアプローチです。 http://codeply.com/go/uKVYeBvsMF

OR

2）CSS n番目の子のアプローチ。 CSSを使用して列を消去します。http://codeply.com/go/GQ5fnkSqKl

.row > .col-sm-6:nth-child(2n+1) { 
     clear: left; 
}