Bootstrap卡片在Safari中无法继承行/列高度问题求助

1. 确保列容器（.col）设置100%高度 #

Safari对百分比高度的解析要求父元素必须有明确的高度定义，当前你的.col（即.card-box-schaddow）没有设置高度，导致子元素.card的height:100%无法生效。修改子组件CSS：

.card-box-schaddow {
  border-radius: 50%;
  height: 100%; /* 新增此行，让列占满行高 */
}

2. 使用Bootstrap原生Flex类替代自定义高度（推荐） #

Bootstrap的flex布局类已经做了跨浏览器兼容，比自定义height:100%更可靠：

• 给列容器添加d-flex，使其成为flex容器
• 给卡片添加flex-fill，让卡片自动填充列的可用高度

修改子组件HTML：

<div class="col card-box-schaddow d-flex" id="card-box-schaddow-{{cardElement.icon}}">
  <a role="button" class="card btn flex-fill" [href]="'#'+cardElement.id">
    <div class="card-body">
      <!-- 原有内容保持不变 -->
    </div>
  </a>
</div>

同时可以移除.card中的height:100% !important，避免样式冲突。

3. 强制行内列等高（兜底方案） #

给父组件的.row添加align-items-stretch类，强制所有列自动拉伸到同一高度，这是Bootstrap原生支持的属性，对Safari兼容性极佳：

<div class="row row-cols-sm-1 row-cols-md-2 row-cols-xl-{{cardElements.length}} g-3 py-5 align-items-stretch">
  <app-card-content *ngFor="let cardElement of cardElements" [cardElement]="cardElement"></app-card-content>
</div>

为什么这些方法有效？ #

Safari在处理flex布局时，对元素高度的继承逻辑比其他浏览器更严格：

• 百分比高度需要父级有明确的高度值或flex上下文
• Bootstrap的flex-fill和align-items-stretch是基于标准flex属性实现的，能绕过Safari的高度解析限制

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