如何使用ngFor和bootstrap创建一排新卡片4

Question

我正在尝试使用带有Angular的Bootstrap 4的卡组功能ngFor.

这是我现在的HTML,但在插入3个项目后,我找不到如何打破新行:

<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类,但到目前为止这对我来说还没有用.

Answer 1

你需要一个包装div与类col-4arroud的<div>与card类.这就是网格布局的工作原理.

请参阅此处使用网格标记部分: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>

样本plunker:https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6 ？ p = preview