应使用.row+.col-*组合实现响应式卡片网格，配合row-cols-*控制每行列数；卡片圆角阴影用.rounded-*和.shadow-*直接作用于.card容器；图片保持比例需.img-fluid配合.card-img-top或.ratio类，避免拉伸变形。
Bootstrap 5 怎么让图片卡片自动适配不同屏幕宽度
直接用 .row + .col-* 组合就能实现响应式网格，但关键在列数控制和断点选择。Bootstrap 5 默认提供 col-12（移动端全宽）、col-md-6（中屏两列）、col-lg-4（大屏三列）、col-xl-3（超大屏四列）这种阶梯式布局，不用写媒体查询。
常见错误是只写 col 不带断点，结果所有尺寸都等宽，小屏撑不开；或者漏掉 .row 导致左右 margin 失控、卡片错位。
- 必须包裹在
<div class="row"> 内，否则 <code>.col的负 margin 无法抵消 - 避免混用旧版栅格类（如
col-sm-4和col-md-6同时出现却没对齐逻辑），优先统一用md或lg作为最小生效断点 - 如果卡片内容高度不一致，加
.row-cols-*类（比如row-cols-md-2 row-cols-lg-3）比单个col更稳，它会强制每行固定列数 -
.rounded-3是 Bootstrap 5 默认最大圆角（0.75rem），比.rounded（0.25rem）更柔和，适合卡片 - 阴影层级受父容器 overflow 影响：如果卡片外层有
.overflow-hidden，阴影会被裁掉，务必检查嵌套结构 - 暗色主题下
.shadow可能发灰，可配合data-bs-theme="dark"或自定义 CSS 变量调整--bs-box-shadow - 如果需要统一图片高度（比如瀑布流感），改用
<div class="ratio ratio-4x3"><img ...></div>，Bootstrap 5 的.ratio类靠 padding-bottom 实现响应式宽高比，不依赖图片原始尺寸 - 避免给图片设固定
height，否则小屏时图片被压缩，文字区域错位 - 加载慢图时空白区域塌陷？加
loading="lazy"和占位背景色：style="background-color: #f8f9fa;" - 不要用
!important强刷border-radius，Safari 会忽略 - iOS 15+ 对
box-shadow的 spread 值敏感，避免用大数值如shadow-lg配合大圆角，换成shadow-sm rounded-3更稳妥 - 真机调试时开 Web Inspector → Elements → 检查 computed 样式里
border-radius是否被覆盖（比如来自.card-img-top的单独圆角）
怎么给 Bootstrap 卡片加圆角和阴影且不破坏响应式结构
Bootstrap 5 自带 .rounded-* 和 .shadow-* 工具类，但直接加在 <div class="card"> 上就行，不需要额外 wrapper。注意：圆角和阴影作用对象必须是卡片容器本身，不是内部的 <code>.card-img-top 或 .card-body，否则在 flex 布局下容易被裁切或阴影偏移。
常见错误是把 .rounded-3 加到图片上——图片会圆角，但卡片边框还是直角；或者用 .shadow（无后缀）导致在深色背景上几乎看不见，推荐明确用 .shadow-sm（轻）、.shadow（中）、.shadow-lg（重）。
图片如何在卡片内保持比例又不拉伸变形
用 <img src="..." class="card-img-top img-fluid"> 是最简方案。.img-fluid 提供 max-width: 100% + height: auto，保证等比缩放；.card-img-top 则负责将图片顶置并自动设置圆角顶部边缘（配合卡片的 .rounded-3 时顶部圆角生效）。
别用 width: 100% 或 object-fit: cover 直接写在图片上——前者会压扁，后者若没设固定高宽会导致卡片高度塌陷，网格错乱。
为什么卡片网格在 Safari 或 iOS 上阴影/圆角显示异常
主要是 Safari 对 overflow: hidden + border-radius + box-shadow 组合渲染有 bug：阴影被裁、圆角不生效。Bootstrap 卡片默认没设 overflow: hidden，但如果你手动加了，就得小心。
解决方案不是禁用阴影，而是微调渲染层：给卡片加 style="transform: translateZ(0);" 或 style="-webkit-backface-visibility: hidden;"，触发硬件加速，绕过 Safari 的合成 bug。
