css - 如何在两个不同的列中安排 Bootstrap 中的井？

Question

我想将我的井列表安排在两个不同的列中。我附上了我的 plunker 链接 https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview .

这是我的观点

  <div class="well well-lg" ng-repeat="(key, data) in myData.config.A" style="width:500px;">{{key}}</div>
        </div>

这是我的 Controller

$scope.myData={
  "_id": "ui",
  "config": {
    "A": {
      "aaaa": {
        "required": true,
        "editable": true
      },
      "bbbbb": {
        "required": true,
        "editable": true
      },
      "ccccc": {
        "required": true,
        "editable": false
      },
      "ddddd": {
        "required": true,
        "editable": true
      },
      "eeeee": {
        "required": true,
        "editable": true
      },
      "fffff": {
        "required": true,
        "editable": true
      }
    }
  }
}  
});

我希望 aaaa,bbbb,cccc 在一列中，而 ddddd,eeee,fffff 在另一列中。如何安排这些？

Answer 1

这是我能想到的一种方法，使用 Boostrap 的网格系统 row.column。

ng-repeat 由 $index 跟踪。从那里，您可以使用 ng-show 指定要选择性显示的数据。这样您就可以在两列中显示它。

这是插件链接:

Updated Plunker.

注意:作为替代方案，如果您想自定义自己的列，您可以使用 Bootstrap 网格系统以外的东西。