css - AngularJS/引导 CSS : Wrong panels alignments into 2 columns inside a ng-repeat

Question

我对 AngularJS 的 Bootstrap 面板有疑问。 我无法正确对齐我的面板。我想将我的面板显示为 2 列。

我有以下 HTML 代码:

<div class="row">
  <div class="col-lg-3 col-sm-3 col-xs-3">
    <span>Some stuffs</span>
  </div>
  <div class="col-lg-9 col-sm-9 col-xs-9">
    <div class="row">
       <div class="col-lg-6 col-sm-6 col-xs-6"
            ng-repeat="i in items">
         <div  class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{i.title}}</h3>
          </div>
          <div class="panel-body">
            {{i.content}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

基本情况: 比方说，我有 3 个元素。 前 2 个元素将显示在第一行中。 - 元素 1:行 0/列 0 - 元素 2:第 0 列/第 1 列 最后一项应显示在第二行第一列 - item3: row1/col0

当面板的高度相同时，它工作正常。

我的用例: 我的面板内容可以彼此不同。 因此，当我的第一个面板内容比其他面板大时，第三个元素进入 col1。 - item3: row1/col1

它留下了很大的空间，然后如果我想添加第 4 个元素......它变得丑陋:(

我创建了一个展示问题的演示:http://plnkr.co/edit/TZDck5b9G9Ap32KlPk4q?p=preview

Answer 1

我能想到的正确显示第 3 个 div 而不管其大小的唯一解决方案是对前 2 个 div 使用一行，对接下来的 2 个使用另一行(依此类推)。您可以通过将 ng-repeat 迭代放在行 div 之外并在迭代在添加元素上时有条件地分配行类来实现。

<div ng-repeat="i in items">
    <div ng-if="$even" class="row">
      <div class="col-lg-6 col-sm-6 col-xs-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{i.title}}</h3>
          </div>
          <div class="panel-body">
            {{i.content}}
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-sm-6 col-xs-6" ng-if="items[$index + 1]">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{items[$index + 1].title}}</h3>
          </div>
          <div class="panel-body">
            {{items[$index + 1].content}}
          </div>
        </div>
      </div>
    </div>
</div>

缺点当然是您正在复制列的标记(显示实际面板的标记)，如果您为此部分创建指令，则可以避免这种情况。我知道 Exlord 的解决方案更简单，但我觉得这更接近 Angular/Bootstrap 方式，因为否则你会通过“强制”行的列分成多行(使用 clear :对)。

请在此处查看更新的 plunkr:http://plnkr.co/edit/7KMZdzcpR7Ff2D6pExVB?p=preview