使用 bootstrap 网格显示来自 api 调用 ngFor 的项目
Using bootstrap grid to display items from api call with ngFor
我调用 api 从 The Movie Database 获取数据。
然后我想使用 bootstrap 网格系统显示数据。
这是目前使用 Angular Material 网格时的样子:
<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>
当我切换到移动视图时,问题就出现了。
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>
如果返回的值太多而无法放在一行中,则会创建一个包含相同列数的全新行。
有人知道如何实现吗?
预先感谢您花时间阅读并尝试提供帮助:)
类似
<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 类 对于任意列,根据分辨率选择看起来不错的内容。
我调用 api 从 The Movie Database 获取数据。
然后我想使用 bootstrap 网格系统显示数据。
这是目前使用 Angular Material 网格时的样子:
<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>
当我切换到移动视图时,问题就出现了。
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>
如果返回的值太多而无法放在一行中,则会创建一个包含相同列数的全新行。
有人知道如何实现吗? 预先感谢您花时间阅读并尝试提供帮助:)
类似
<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 类 对于任意列,根据分辨率选择看起来不错的内容。