Angular 2 ng对于行和列创建了一个大的Col

Question

显然ngfor一个接一个地生成div的分区,当它完成将所有div一个放在另一个上时,呈现一个糟糕的设计,我想得到这样的东西:

[1] [2] [3]
[4] [5] [6]

结果我只有:

[ 1 ]
[ 2 ]
[ 3 ]
  and continues..

我的JSON是这样的:

[
  {
    "id_nivel": "1",
    "nombre": "A",
    "constelacion": "AA",
    "descripcion": "AAAAAAAAAAAAAAAAAAAAA"
  },
  {
    "id_nivel": "2",
    "nombre": "B",
    "constelacion": "BB",
    "descripcion": "BBBBBBBBBBBBBBBBBBBBB"
  },
  {
    "id_nivel": "3",
    "nombre": "C",
    "constelacion": "CC",
    "descripcion": "CCCCCCCCCCCCCCCCCCCCC"
  },
  {
    "id_nivel": "4",
    "nombre": "D",
    "constelacion": "DD",
    "descripcion": "DDDDDDDDDDDDDDDDDDDDD"
  },
  {
    "id_nivel": "5",
    "nombre": "E",
    "constelacion": "EE",
    "descripcion": "EEEEEEEEEEEEEEEEEEEEE"
  },
  {
    "id_nivel": "6",
    "nombre": "F",
    "constelacion": "FF",
    "descripcion": "FFFFFFFFFFFFFFFFFFFF"
  }
]

主要问题:

<div class="app flex-row align-items-center">   
<div class="container">
        <div *ngFor="let data of Const" class="row"> 
            <div class="card-deck">
                <div class="card col-md-4">
                    <div class="card-block">
                        <h4 class="card-title">Level {{data.id_nivel}} - {{data.nombre}} </h4>
                        <p class="card-text"> {{data.descripcion}}</p>
                    </div>
                </div>
        </div>
    </div>
</div>

更多信息在这个Plunker:

https://plnkr.co/edit/e5K5oiKL2n9IdHM5qk1v?p=preview

Answer 1

替换为以下HTML

<div class="app flex-row align-items-center">   
    <div class="container"> 
        <div class="card-deck row">
            <div class="card col-md-6" *ngFor="let data of Const">
                <div class="card-block">
                    <h4 class="card-title">Level {{data.id_nivel}} - {{data.nombre}} </h4>
                    <p class="card-text"> {{data.descripcion}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

屏幕截图 更新了Plunk