Bootstrap中的列没有响应

Question

我正在尝试使用卡片进行简单的行/列显示。问题是，无论的屏幕大小如何，我的卡片都只显示在一列中

<div *ngFor="let f of files$ | async" class="row m-2">
<div class="col-xm-6 col-sm-3 col-md-2 col-lg-1">
<div class="card m-2">
<div>f.name</div>
</div>

这是因为*ngFor吗？

请帮助

Answer 1

您重复列而不是行。。。

<div class="row m-2">
<div *ngFor="let f of files$ | async" class="col-xm-6 col-sm-3 col-md-2 col-lg-1">
<div class="card m-2">
...
</div>
</div>
</div>

Answer 2

在ngFor中创建一个带有类行的div，以封装当前的代码。使用ngFor从div中删除class行。

<div *ngFor="let f of files$ | async">
<div class="row mt-2">
<div class="col-xm-6 col-sm-3 col-md-2 col-lg-1">
<div class="card m-2">
<div>f.name</div>
</div>
</div>
</div>
</div>