Question

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

以下是我现在使用的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-4类与<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

Answer 2

感谢@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>

Answer 3

card-group阻止col包裹到下一个“line”。将card放在列中，而是使用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>

http://www.codeply.com/go/yWdYL5GrTu

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

3 个答案: