it-swarm.com.ru

Как создать новый ряд карточек, используя ngFor и bootstrap 4

Я пытаюсь использовать функциональность группы карт Bootstrap 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>

Я видел другой ответ, в котором говорилось об использовании класса clearfix, но пока это не помогло мне.

6
otusweb

Вам нужна обертка 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

7
Ahmed Musallam

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

0
Zim

Благодаря @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>
0
otusweb