javascript - 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-small 显示器上行中的 1 个 div

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>

Note: The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.