comment afficher une liste en 3 colonnes

Question

J'ai une liste que j'affiche à l'aide de *ngFor verticalement. J'ai besoin d'afficher cette liste sur 3 colonnes ;

J'ai essayé d'utiliser d-flex flex-wrap mais cela n'a pas résolu le problème. J'ai également défini une largeur fixe pour la division mais cela m'a donné une liste défilante.

Voici mon code

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

J'ai également essayé d'utiliser ngFor sur un div, pensant que le flex-wrap ne fonctionne que sur les divs, mais j'ai obtenu le même résultat.

<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

Utilice row pour envelopper le DOM et col-3 à chaque div à l'intérieur de l'emballage

AS ci-dessous :

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

Voir l'exemple ici

Answer 2

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

Answer 3

Si vous voulez 3 colonnes avec bootstrap c'est la classe col-4 vous avez besoin de (12 colonnes bootstrap / 3) sur votre div.

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