如何让Bootstrap卡片尺寸统一？以第二行卡片高度为基准

你的问题源于部分卡片包含副标题（如第二行的(par défaut)）导致高度更高，其他行无副标题的卡片高度较矮，不同行的卡片尺寸无法统一。以下是两种可行方案，均能实现所有卡片以最高卡片（第二行）的高度为基准统一尺寸：

方案一：用JavaScript动态设置统一高度（Angular实现） #

通过计算所有卡片的高度，强制将所有卡片容器设置为最高高度：

1. 修改父组件HTML #

给子组件添加模板引用变量#cardItem：

<div class="row">
    <div class="col-12 col-lg-6">
        <div class="row">
            <radio-button-square-card
                    #cardItem
                    *ngFor="let index of [2, 3, 4, 5, 6, 7, 8, 9]"
                    [checked]="index === 5"
                    [index]="index"
                    [label]="' sonneries'"
                    [subtitle]="index === 5 ? '(par défaut)' : undefined"
                    class="col-6 col-md-3 col-lg-4 mb-1">
            </radio-button-square-card>
        </div>
    </div>
</div>

2. 实现父组件TS逻辑 #

在组件类中通过ViewChildren获取所有卡片元素，计算并设置统一高度：

import { Component, AfterViewInit, QueryList, ViewChildren, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-parent-component', // 替换为你的父组件选择器
  templateUrl: './your-parent.component.html',
  styleUrls: ['./your-parent.component.css']
})
export class YourParentComponent implements AfterViewInit {
  @ViewChildren('cardItem') cardItems!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    // 等待DOM渲染完成后执行
    setTimeout(() => {
      const heights = this.cardItems.map(item => item.nativeElement.offsetHeight);
      const maxHeight = Math.max(...heights);
      this.cardItems.forEach(item => {
        item.nativeElement.style.height = `${maxHeight}px`;
      });
    }, 0);

    // 可选：监听窗口resize事件，窗口变化时重新计算高度
    window.addEventListener('resize', () => {
      const heights = this.cardItems.map(item => item.nativeElement.offsetHeight);
      const maxHeight = Math.max(...heights);
      this.cardItems.forEach(item => {
        item.nativeElement.style.height = `${maxHeight}px`;
      });
    });
  }
}

方案二：改用CSS Grid布局（无需JS） #

通过Grid布局自动让所有网格项高度统一为最高项的高度，完全不需要JavaScript：

1. 修改父组件HTML #

将内层的row替换为自定义Grid容器类card-grid，移除子组件的mb-1（用Grid的gap替代间距）：

<div class="row">
    <div class="col-12 col-lg-6">
        <div class="card-grid">
            <radio-button-square-card
                    *ngFor="let index of [2, 3, 4, 5, 6, 7, 8, 9]"
                    [checked]="index === 5"
                    [index]="index"
                    [label]="' sonneries'"
                    [subtitle]="index === 5 ? '(par défaut)' : undefined"
                    class="col-6 col-md-3 col-lg-4">
            </radio-button-square-card>
        </div>
    </div>
</div>

2. 添加Grid布局CSS #

在父组件的CSS文件中添加适配不同屏幕尺寸的样式：

.card-grid {
  display: grid;
  /* 中等屏幕及以上显示4列，对应原col-md-3 */
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  gap: 0.25rem; /* 替代原mb-1的间距 */
}

/* 小屏幕显示2列，对应原col-6 */
@media (max-width: 767px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
}

/* 大屏幕显示3列，对应原col-lg-4 */
@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(33.333%, 1fr));
  }
}

子组件无需修改 #

你的子组件已添加h-100和d-flex flex-column，可保证卡片内容自动填充高度，无需额外调整。

内容的提问来源于stack exchange，提问作者UserRomain1234