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>

我想要的是让我的 items 响应式地呈现，比如说

在大中型显示器上，一行中有 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>

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