web-dev-qa-db-ja.com

ngForおよびbootstrap 4を使用してカードの新しい行を作成する方法

Bootstrap 4 with 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>

Clearfixクラスを使用するという他の回答を見てきましたが、これは今のところうまくいきませんでした。

twitter-bootstrapangularbootstrap-4ngfor
7
otusweb

クラスcol-4でdivをラップする必要があります<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

13
Ahmed Musallam

@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>
1
otusweb

card-groupは、列の次の「行」への折り返しを妨げています。列内に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/yWdYL5GrT

0
Zim