Колонно-сеточная система в Bootstrap 4 - PullRequest
Новая
       44

Колонно-сеточная система в Bootstrap 4

0 голосов
/ 06 мая 2020

Я новичок в Angular и Bootsrap 4, и у меня возникли проблемы с настройкой макета панели инструментов, над которой я сейчас работаю. У меня есть ряд карточек, которые нужно расположить определенным образом, а именно:

enter image description here

У меня есть строка, в которую я положил div col-12, и внутри я разместил все карточки (1,2 и 3 - это stati c содержимое, остальные загружаются с помощью ngFor из списка, полученного из базы данных).

Проблема заключается в том, что, поскольку карта 1 имеет двойную высоту по сравнению со всеми остальными, столбцы для 2 и 3 имеют ту же высоту, что и столбцы для карты 1. Результат выглядит следующим образом:

enter image description here

Есть ли способ исправить это, используя мой подход, скажем, с дополнительным пустым пространством в столбцах для карты 2 и 3 убраны, а остальные карты туда положены? Или мне стоит использовать совсем другой подход? изменить: Вот код, который я использовал. 

<div class="col-lg-12">
                    <div class="row">
                        <div class="double-card-col">
                            <app-tool-card-double-1></app-tool-card-double-1>
                        </div>
                        <div class="cards">
                            <tool-card-2></tool-card-2>
                            <tool-card-3></tool-card-3>
                        </div>
                        <ng-container *ngFor="let tool of tools; trackBy: trackBy">
                            <tool-card></tool-card>
                        </ng-container>

                    </div>
...