web-dev-qa-db-fra.com

Comment créer une nouvelle ligne de cartes en utilisant ngFor et bootstrap 4

J'essaie d'utiliser la fonctionnalité de groupe de cartes de Bootstrap 4 avec Angular ngFor.

Voici le code HTML que j'ai pour l'instant, mais je n'arrive pas à trouver comment passer à une nouvelle ligne après avoir inséré 3 éléments:

<div class="row card-group">
    <div *ngFor="let presentation of presentations" class="col-4 card">
        <a [routerLink]="['/presentation', presentation._id]">{{presentation.title}}</a>
    </div>
</div>

J'ai vu une autre réponse dire d'utiliser la classe clearfix, mais cela n'a pas encore fonctionné pour moi.

twitter-bootstrapangularbootstrap-4ngfor
6
otusweb

Vous avez besoin d'un wrapping div avec la classe col-4 et du <div> avec la classe card. Voilà comment fonctionne la disposition de la grille.

voir à l'aide de la section marquage de la grille ici: https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup

alors:

<div class="row card-group">
    <div class="col-4"  *ngFor="let presentation of presentations">
        <div class="card">
            <a [routerLink]="['/presentation', presentation._id]">{{presentation.title}}</a>
        </div>
    </div>
</div>

exemple de programme: https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview

7
Ahmed Musallam

Le card-group empêche les colonnes de passer à la "ligne" suivante. Placez les cards dans les colonnes et utilisez plutôt h-100 pour rendre les cartes pleines/de même hauteur. De cette manière, le code Angular n'aura pas besoin d'itérer la ligne.

    <div class="row">
        <div class="col-4">
            <div class="card h-100">
                ..
            </div>
        </div>
        <div class="col-4">
            <div class="card h-100">
            ..
            </div>
        </div>
    </div>

http://www.codeply.com/go/yWdYL5GrTu

0
Zim

Grâce à @zimSystem, j'ai trouvé quelque chose qui fonctionne. 

<div class="row">
    <div *ngFor="let presentation of presentations" class="col-4 card">
        <a [routerLink]="['/presentation', presentation._id]"><img class="card-img-top" src="..." alt="Card image cap"></a>
        <div class="card-block">
            ...
        </div>
    </div>
</div>
0
otusweb