将 Twitter Bootstrap 的 .row 元素与 ng-repeat 一起使用

Question

我在我的angularjs应用中具有以下片段：

<div ng-repeat="proverb in proverbs">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>

这将对我的proverbs数组中每个proverb的类div元素生成CC_1元素。我的目的是显示两列每当屏幕足够大时。

尽管不使用Bootstrap的.row元素，但上述片段的工作原理。

问题是，我如何包含一个只会出现ng-repeat的每个迭代的.row元素，以便我得到以下最终结果：

<div class="row">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>

此外，鉴于，每当Bootstrap中.col元素的跨度的总和大于12，下一个元素就会被推下，甚至有任何理由使用.row类，而不是保证在所有人之前生成新行列完全填充？

Answer 1

如果您不需要.row，则可以执行此操作

<div ng-repeat="proverb in proverbs">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
      <ng-show="$index % 2 == 0" br/>
    </div>
  </div>
</div>