html - 如何以 3 列显示列表

Question

我有一个使用 *ngFor 垂直显示的列表。 我需要在 3 列上显示此列表；

我尝试使用d-flex flex-wrap但这并没有解决问题。我还为 div 设置了固定宽度，但这给了我一个滚动列表。

这是我的代码

<div class="d-flex flex-wrap container">
    <li *ngFor="let item of list">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </li>
</div>

我也尝试在 div 上使用 ngFor，认为 flex-wrap 只适用于 div，但它给了我相同的结果

<div class="d-flex flex-wrap container">
    <div *ngFor="let item of list">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </div>
</div>

Answer 1

使用 row 将 DOM 和 col-3 包装到包装内的每个 div

如下:

<div class="container row">
    <div *ngFor="let item of list" class="col-3">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </div>
</div>

See example here