如何使用ngFor和bootstrap 4创建新的卡片行 [英] How to create a new row of cards using ngFor and bootstrap 4

问题描述

我正在尝试将Bootstrap 4的卡组功能与Angular ngFor一起使用.

I'm trying to use the card group functionality of Bootstrap 4 with Angular ngFor.

这是我现在拥有的HTML，但是在插入3个项目之后我找不到如何换行的方法:

Here is the HTML I have for now, but I can't find how to break to a new line after 3 items have been inserted:

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

我看过其他回答说要使用clearfix类，但是到目前为止，这对我来说还行不通.

I've seen other answer saying to use the clearfix class, but this has not worked so far for me.

推荐答案

您需要使用col-4类包装div，并将<div>与card类包装在一起.那就是网格布局的工作原理.

You need a wrapping div with the class col-4 arroud the <div> with card class. thats how grid layout works.

请参阅此处的使用网格标记部分: https://v4- alpha.getbootstrap.com/components/card/#using-grid-markup

see using grid markup section here: https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup

如此:

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

样品塞: https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview

这篇关于如何使用ngFor和bootstrap 4创建新的卡片行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！