如何使用 ngFor 和 bootstrap 4 创建新的卡片行 [英] How to create a new row of cards using ngFor and bootstrap 4
问题描述
我正在尝试将 Bootstrap 4 的卡片组功能与 Angular ngFor
结合使用.
这是我现在拥有的 HTML,但我找不到如何在插入 3 个项目后换行:
<div *ngFor="让演示文稿呈现" class="col-4 卡片"><a [routerLink]="['/presentation',presentation._id]">{{presentation.title}}</a>
我看到其他答案说要使用 clearfix 类,但到目前为止这对我来说还没有用.
你需要一个带有 col-4
类的 div
环绕
card
类.这就是网格布局的工作原理.在此处查看使用网格标记部分:https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup
所以:
<div class="col-4" *ngFor="让演示文稿呈现"><div class="card"><a [routerLink]="['/presentation',presentation._id]">{{presentation.title}}</a>
示例 plunker:https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview一个>
I'm trying to use the card group functionality of Bootstrap 4 with Angular ngFor
.
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>
I've seen other answer saying to use the clearfix class, but this has not worked so far for me.
You need a wrapping div
with the class col-4
arroud the <div>
with card
class. thats how grid layout works.
see using grid markup section here: https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup
so:
<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>
sample plunker: https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview
这篇关于如何使用 ngFor 和 bootstrap 4 创建新的卡片行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!