使用引导网格显示ngFor

Question

我进行了api调用，以从The Movie Database获取数据。

然后我想使用引导网格系统显示数据。

这是当前使用Angular Material Grid的外观：

<mat-grid-list cols="5" rowHeight="2:3" gutterSize="10px">
  <div *ngFor="let movie of movies.results">
    <mat-grid-tile>
        <mat-card>
      <div
        class="thumbnail"
        [style.background-image]="getSafeStyle(movie.poster_path)"
      >
        -- id: {{ movie.id }} -- name: {{ movie.title }}
      </div>
    </mat-card>
    </mat-grid-tile>
  </div>
</mat-grid-list>

当我切换到移动视图时，问题开始了。

角度材料的网格系统不会像Bootstrap那样调整元素的大小。

我正在尝试将其更改为引导程序，但是我不知道如何为元素分配列大小和行，因为返回的结果始终可以更改。

所以基本上我想要实现的是这样的东西，但是在ngFor内部

<div class="row">
  <div class="col-md-4">
    API RESULT
  </div>
  <div class="col-md-4">
    API RESULT
  </div>
  <div class="col-md-4">
      API RESULT
    </div>
</div>

并且如果返回的值太多而不能容纳在一行中，那么将创建一个新的新行，其中包含相同数量的列。

有人知道如何实现这一目标吗？ 在此先感谢您抽出宝贵的时间阅读并尝试提供帮助：）

Answer 1

类似

<div class="row">
  <div *ngFor="let movie of movies.results" class="col-xl-2 col-lg-3 col-md-4 col-sm-12">
<!-- contents here -->

任意列的Bootstrap类，根据分辨率选择看起来不错的东西。