如何使用引导程序将两列网格中的长文本内容对齐？

Question

A有一个带有几个元素的json数组。内容以全文形式提供，长度可变。

我想将网格中的元素与两列对齐。但是如何？

<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

这里是最后一个元素＆＃34; E＆＃34;应该放在下面＆＃34; C＆＃34;不低于＆＃34; D＆＃34;。但事实并非如此。为什么？我的网格定义是错误的吗？

Answer 1

发生problem因为Bootstrap使用float:left因此较短的列被拉到较高列的右侧。

有两种方法可以解决这个问题......

1）每12 col-*个单位清除“重置”DIV。在你的情况下每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;
 }