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（额外 大）。您几乎可以使用这些类的任意组合来创建更具动态性和灵活性的布局 。