Estoy tratando de usar la funcionalidad del grupo de tarjetas de Bootstrap 4 con Angular ngFor .
Aquí está el HTML que tengo por ahora, pero no puedo encontrar cómo pasar a una nueva línea después de que se hayan insertado 3 elementos:
<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>He visto otra respuesta que dice usar la clase clearfix, pero hasta ahora no me ha funcionado.
Necesita un div envolvente con la clase col-4 alrededor del <div> con la clase de card . así es como funciona el diseño de cuadrícula.
consulte la sección Uso de marcado de cuadrícula aquí: https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup
asi que:
<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>plunker de muestra: https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview
Gracias a @zimSystem encontré algo que funciona.
<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>El card-group impide que las columnas pasen a la siguiente "línea". Coloque las card dentro de las columnas y, en su lugar, use h-100 para hacer que las tarjetas tengan la misma altura. De esta manera, el código Angular no necesitará iterar la fila.
<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>