响应式 Bootstrap 4 grid for Angular 2 ngFor

Question

我想知道是否有一种方法可以在 Angular 2 中响应式地渲染由 *ngFor 创建的元素？

我使用Bootstrap 4基于flex 属性的网格系统。我的 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 呈现响应式，比如说

3div行在大中型显示器上

2 div 排在小的

1 div 在 x-small 显示器的行中

Answer 1

您不能真正将这些东西与遍历 items 集合联系起来。您可以将 xl、lg、md & sm class 与 col-size-number（例如 col-xs-12）class 一起使用] 在同一行。 Bootstrap 会根据屏幕分辨率在元素上应用 class。

标记

<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.

响应式 Bootstrap 4 grid for Angular 2 ngFor

Responsive Bootstrap 4 grid for Angular 2 ngFor

javascript

css

bootstrap-4

angular