Twitter bootstrap 如何使用ngFor和bootstrap 4创建新行卡

我正在尝试将引导4的卡组功能用于Angular

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>

{{presentation.title}

---

我看到其他答案说使用clearfix类，但这对我来说还不起作用。

你需要一个带有类

col-4

的包装

div

环绕

带有

卡的
类。这就是网格布局的工作原理

请参见此处的“使用网格标记”部分：

因此：


卡组
正在阻止col包装到下一个“行”。将
卡
s放置在列内，并使用
h-100
使卡充满/相同高度。这样，Angular代码就不需要迭代行了

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


..
..

多亏了@zimSystem，我找到了一些有效的方法

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


...
为什么使用
卡组
？它不允许像row>col那样包装系统，因为我希望每行中的卡片具有相同的高度。所以我基本上想要多行的卡片组，
行
已经是相同的高度了，因为BS4使用flexbox。您不需要迭代
行
。它可以工作，但是如果卡的卡内容没有相同的高度，卡组的大小就不合适。是的，如果没有CSS更改，这将不起作用。唯一的其他选择是将数组拆分为3个数组。这是一个示例plunker:。注意，采用这种方法，每个3个itesm将具有相同的高度，但并非所有项目都具有相同的高度。请注意，展开预览窗口以查看它是否正常工作。这非常有帮助！感谢幸运的是，如果每张卡片上的文本内容是不同的行数，那么卡片的高度就不一样了。这是可行的。但是它会拉伸卡片的高度image@DaveAAA什么形象？问题中没有提到形象。干得好！我用你的代码修改了这个方法-

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