Comment créer une nouvelle ligne de cartes à l'aide de ngFor et bootstrap 4

Je suis en train d'utiliser la carte de groupe fonctionnalité de Bootstrap 4 Angulaire ngFor.

Voici le code HTML que j'ai pour le moment, mais je ne trouve pas comment briser une nouvelle ligne après 3 articles ont été insérés:

<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 d'autres réponse disant que l'utilisation de la clearfix de classe, mais cela n'a pas fonctionné jusqu'à présent pour moi.

Pourquoi utiliser card-group? Il ne permet pas d'emballage au moyen d'une ligne>col.
Parce que je veux que les cartes ont la même hauteur à l'intérieur de chaque ligne. J'ai donc voulez-o plusieurs lignes de cardgroups
Le row est déjà à la même hauteur, car BS4 utilise flexbox. Vous n'avez pas besoin de parcourir les row.

OriginalL'auteur otusweb | 2017-05-02

8

Vous avez besoin d'un emballage div avec la classe col-4 arroud la <div> avec card classe. c'est comment de la grille de mise en page fonctionne.

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

donc:
```
<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>
```
échantillon plunker: https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview

Cela fonctionne, mais si le contenu de la carte de la carte n'ont pas la même hauteur, la carte de groupe ne sont pas dimensionnées de manière appropriée reportez-vous à plnkr.co/modifier/QeFpHMVyQwo81SsGfeTd?p=preview
ouais, c'est de ne pas aller travailler sans CSS changements. La seule autre option que vous avez est de diviser le tableau en tableaux de 3. voici un exemple de plunker: plnkr.co/modifier/jUtAEEpyeGTYtVNUDLQS?p=preview. À noter qu'avec cette approche, chaque 3 itesm auront la même hauteur, MAIS pas tous les articles. Remarque, développez la fenêtre de prévisualisation pour voir ce qu'il fonctionne.

OriginalL'auteur Ahmed Musallam

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>

Good job!!! J'ai modifié cette façon à l'aide de votre code - <div class="row"> <div class="col-3 card" *ngFor="let project of projects"> ... </div> </div>

OriginalL'auteur otusweb

0

La card-group est d'empêcher le col est de retour à la "ligne". Placez le cards à l'intérieur de l'colonnes, et au lieu d'utiliser h-100 pour rendre les cartes plein/à la même hauteur. De cette façon, l'angle de code n'aurez pas besoin d'effectuer une itération de 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

Malheureusement, si le contenu du texte sur chaque carte est un nombre différent de ligne, puis les cartes n'ont pas la même hauteur.

OriginalL'auteur Zim

Vous devez vous connecter pour publier un commentaire.