原来我对引导程序 4 中的卡片列有以下问题
我的代码如下:
<div class="container m-5">
<div class="card-columns m-5 animated fadeIn mx-auto">
<div class="card puntero" *ngFor="let item of items" (click) = "verArtista(item)">
<img src="{{item.images | noimage}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<p class="card-text">
<span class="badge badge-pill badge-primary" *ngFor="let artista of item.artists">{{artista.name}}</span>
</p>
</div>
</div>
</div>
</div>
此代码包含在容器类中,因此卡片最终与左侧对齐,类似于以下示例
我尝试了一些设置,但似乎都没有。
朋友,由于您使用容器,因此您的卡片不会占用该容器的 100%。我建议您使用一行然后将大小应用于卡片,尊重引导网格使用的 12 列系统。从那里开始,我给你留下一个例子,我在一行( row )内使用三张卡片,而这三张卡片又在一个容器内,起初它们应该看起来就像你的例子一样,但是使用 flex 我们可以使用justify-content-将它们垂直对齐到中心中心我们在包含类行的 div 中应用这个类,因为它的行为适用于包含父级的子级。