Карты не выравниваются должным образом в группе карт

Question

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

Из того, что я прочитал в документации, класс карточных групп должен выровнять нижнюю часть своих дочерних элементов, но почему-то это не так ... Кто-нибудь знает, почему это не работает?

projects.html

<app-search></app-search>
<div class="card-group justify-content-center">
    <div *ngFor="let project of filtered | async" class="card-group justify-content-center">
        <app-project class="m-3" [title]="project.name" [preview]="project.preview" [text]="project.text"></app-project>
    </div>
</div>

Project.html (компонент приложения-проекта)

<div class="card" style="max-width: 320px; margin-left: 10px;">
    <h4 class="card-title text-center card-header">{{title}}</h4>
    <img class="card-img-top" [src]="preview" alt="Card image">
    <div class="align-content-center card-margin card-text text-justify">{{text}}</div>
</div>

project.css

@mixin cardMargin {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 2%;
    margin-top: 0%;
}

.card-margin {
    @include cardMargin();
}

Answer 1

Вам не нужен div для циклического перебора массива filtered. Согласно вашему текущему коду, у вас есть card-group, а для каждой карты у вас есть два div. Дополнительные классы в этих div вызывают проблемы с поведением загрузочных карт по умолчанию. Вы можете напрямую использовать ngFor для компонента app-project, как показано ниже:

<div class="card-group justify-content-center">
    <app-project *ngFor="let project of filtered | async" class="m-3" [project]="project"></app-project>
</div>

Я удалил один из включенных div s.

Теперь у вас будетчетыре app-project компонента внутри card-group div. Если вы осмотрите, вы обнаружите, что все app-project имеют одинаковую высоту. Это конфигурация начальной загрузки по умолчанию - все элементы внутри card-group имеют одинаковую высоту. В вашем случае каждая карта в пределах app-project выровнена по верху. Вот почему вы видите пустое место под каждой картой. Чтобы решить эту проблему, нам нужно сделать card равной высоте с app-project компонентом. Мы можем сделать это, сделав компонент app-project гибким контейнером. Примените приведенный ниже CSS к projects.component.scss:

app-project {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

Теперь каждая карта займет всю высоту app-container. Это приведет к тому, что верх и низ каждой карточки будут выровнены друг с другом.

Answer 2

Как я уже упоминал в комментариях, вы можете дать высоту классу card-text. проверьте приведенный ниже фрагмент кода CSS.

.card-text {   
   height: 100px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: normal;
}

Приведенный выше CSS будет скрывать текст карты, если он превышает высоту 100 пикселей.

Вы можете проверить приведенный ниже код стекаблика здесь и ниже код реагирует на загрузочную сетку.