Angular 2 ngFor的自适应Bootstrap 4网格

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

X-小显示屏上的行中1格

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>

注意：Bootstrap v4网格系统具有五层类：（xs 超小），sm（小），md（中），lg（大）和xl（超大）。您可以使用这些类的几乎任何组合来创建更动态和灵活的布局。