卡组中的卡未正确对齐

Question

我正在尝试放置这些元素，以便它们与底部对齐。在查看引导程序参考时尝试过此操作，但是我看不到我做错了什么导致了此行为。

根据我在文档上所读的内容，card-group类应使其子级的底部对齐，但不知何故……有人知道为什么这不起作用吗？

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

正如我在评论中所提到的，您可以提高类card-text的高度。检查下面的CSS代码段。

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

如果CSS文字的高度超过100像素，则上述CSS会隐藏该文字。

您可以在此处检查下面的stackblitz code，下面的代码可以通过引导网格进行响应。

Answer 2

您不需要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。

现在，您将在app-project div中有四个card-group组件。如果检查，您会发现所有app-project的高度都相同。这是默认的引导程序配置-card-group中的所有元素都具有相同的高度。对于您来说，app-project中的每张卡都与顶部对齐。这就是为什么您在每张卡下方看到空白区域的原因。要解决此问题，我们需要使card与app-project组件的高度相等。我们可以通过使app-project组件成为flex容器来做到这一点。将以下CSS应用于projects.component.scss：

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

现在，每张卡都将占据app-container的整个高度。这样可以使每张卡的顶部和底部彼此对齐。