Responsive Bootstrap 4 grid for Angular 2 ngFor

Question

我不知道是否有辦法在Angular 2中以* ngFor創建響應元素？

我使用基於flex屬性的Bootstrap 4網格系統。而且我有這個代碼在我Angular2應用：

<div class="outlet container"> 
<div class="row itemsBlock"> 
    <div *ngFor="let item of items" class="itemRender"> 
     <img class="itemImage" src="{{item.image}}" /> 
     <span class=itemitle">{{item.title}}</span> 
    </div> 
</div> 

我想要的是讓我的項目響應渲染，稱該行中

3的div上大中型尺度的顯示器

2的div的行中的上小的

1的行中的div上的x小的顯示器

Answer 1

您無法真正將這些東西與循環播放items集合關聯起來。您可以在同一行上使用xl,lg,md & sm類與col-size-number（如col-xs-12）類。 Bootstrap會根據屏幕分辨率將元素應用於元素。

標記

<div class="row itemsBlock"> 
    <div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12"> 
     <img class="itemImage" src="{{item.image}}" /> 
     <span class=itemitle">{{item.title}}</span> 
    </div> 
</div> 

注：引導V4網格系統具有類五層：xs （額外小），sm（小），md（中），lg（大）和xl（額外 大）。您幾乎可以使用這些類的任意組合來創建更具動態性和靈活性的佈局 。