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>

这将为div数组中的每个col-sm-6生成一个proverb个元素，其中包含proverbs个类。我的意图是每当屏幕足够大时显示两列。

尽管没有使用Bootstrap的.row元素，但上述代码段完全符合预期。

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

<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，那么您可以this

<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>

使用Twitter Bootstrap的.row元素和ng-repeat

1 个答案: