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

Posted 2023-02-22

【中文标题】如何使用 ngFor 和 bootstrap 4 创建新的卡片行

【英文标题】：How to create a new row of cards using ngFor and bootstrap 4

【发布时间】：2017-09-30 11:55:01

【问题描述】：

我正在尝试使用带有 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 类，但这对我来说到目前为止还没有用。

【问题讨论】：

为什么使用card-group？它不允许像 row>col 那样包装。

@zimSystem 因为我希望卡片在每一行中具有相同的高度。所以我基本上想要多行卡片组

row 的高度已经相同，因为 BS4 使用了 flexbox。你不需要迭代row。

【参考方案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>

示例插件：https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview

【讨论】：

它可以，但是如果卡片的卡片内容没有相同的高度，卡片组的大小不合适，请参阅plnkr.co/edit/QeFpHMVyQwo81SsGfeTd?p=preview

是的，如果没有 CSS 更改，这将无法正常工作。您唯一的其他选择是将数组拆分为 3 个数组。这是一个示例 plunker：plnkr.co/edit/jUtAEEpyeGTYtVNUDLQS?p=preview。请注意，使用这种方法，每 3 个项目将具有相同的高度，但并非所有项目都将具有相同的高度。请注意，展开预览窗口以查看它是否正常工作。

这帮助很大！谢谢

【参考方案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="..." ></a>
        <div class="card-block">
            ...
        </div>
    </div>
</div>

【讨论】：

干得好！我使用您的代码修改了这种方式 - <div class="row"> <div class="col-3 card" *ngFor="let project of projects"> ... </div> </div>

【参考方案3】：

card-group 阻止 col 换行到下一个“行”。将cards 放在列内，而不是使用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

【讨论】：

很遗憾，如果每张卡片上的文字内容是不同的行数，那么卡片的高度就不一样了。

这可行..但它会拉伸图像的高度

@DaveAAA 什么图片？问题中没有提到图片。