角度2：以矩阵格式显示数组

Question

我有一个数组（人员列表）。我想以角度2的矩阵格式显示这些数据。数组如下所示：

[
{Id: 1, FirstName: 'Michael', LastName: 'Jackson'},
{Id: 2, FirstName: 'Aamir', LastName: 'Khan'},
{Id: 3, FirstName: 'Meg', LastName: 'Ryan'},
{Id: 4, FirstName: 'Raj', LastName: 'Kumar'},
{Id: 5, FirstName: 'Michael', LastName: 'Jordan'},
{Id: 6, FirstName: 'Serena', LastName: 'Williams'},
{Id: 7, FirstName: 'Rathi', LastName: 'Agnihotri'},
]

输出必须是：

Michael Jackson                  Aamir Khan             Meg Ryan
Raj Kumar                        Michael Jordan         Serena Williams
Rathi Agnihotri

我怎样才能做到这一点？

Answer 1

我使用bootstrap list-inline样式来实现这一目标。另外，我添加了自己的媒体查询。

@media screen and (max-width: 400px)  {
    .searchedItem {
        width: 94%;
    }
}

@media screen and (min-width:401px) and (max-width: 768px)  {
    .searchedItem {
        width: 47.5%;
    }
}

@media screen and (min-width:769px) and (max-width: 992px)  {
    .searchedItem {
        width: 23%;
    }
}

@media screen and (min-width:993px) {
    .searchedItem {
        width: 19%;
    }
}