Html 使用引导网格显示ngFor api调用中的项

我通过api调用从中获取数据

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

这是当前使用“角度材质栅格”时的外观：

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

--id:{{movie.id}}--名称：{{movie.title}

当我切换到移动视图时，问题开始出现

Angular material的网格系统不会像Bootstrap那样调整元素的大小

我试图将其更改为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>

API结果
API结果
API结果

如果返回的值太多，无法放入一行，则会创建一个具有相同列数的全新行

有人知道如何做到这一点吗？ 提前感谢您花时间阅读并尝试提供帮助：）

类似的内容

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

---

对于任意列的引导类，根据分辨率选择合适的选项。

只需将它们全部放在同一行中即可。列将自然地换行到下一行。我尝试过这样做，但一开始不起作用，但后来我意识到问题是没有安装引导。不过现在都修好了，非常感谢！