角度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 style來實現這一點。另外我加了我自己的媒體查詢。

@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%; 
 
    } 
 
}