如何在两个不同的列中排列 bootstrap 中的井？

Question

我想将我的井列表安排在两个不同的列中。我附上了我的 plunker link 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>

这是我的控制器

$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 指定要选择性显示的数据。这样你就可以分两列显示了。

这里是 plunker link:

Updated Plunker.

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

Answer 2

如果您想要 2 列，请使用 class 属性中的 col-xs-6、col-sm-6、col-md-6 或 col-lg-6类之一你的迭代元素

像这样：

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

但是你不能按照你想要的方式对它们进行排序，因为 key/value 对象中的条目没有排序，当你使用键+值 ng-repeat 迭代它们时，你可以'即使您认为可以保证顺序，JavaScript 引擎的不同实现也可能以不同方式迭代它们。如果您希望它们按您描述的那样排序，最简单的方法是使用数组并根据需要让它们 sorted/shuffled。

赞：['aaaa', 'ddddd', 'bbbb' .......]

<div class="well well-lg col-xs-6" ng-repeat="data in myData" style="width:500px;">{{data }}</div>

如何在两个不同的列中排列 bootstrap 中的井？

How to arrange wells in bootstrap in two different columns?

css

twitter-bootstrap

angularjs

angular-ui-bootstrap