必须用.ratio容器而非直接设width/height，因其通过padding-top百分比实现固有宽高比，避免替换元素拉伸失真、重排或裁剪；需配合子元素absolute定位及100%宽高才生效。
为什么 .ratio 容器在视频/iframe 场景下必须用，而不是直接设 width/height
因为浏览器渲染 iframe、video、embed 等替换元素时，若只设宽高或仅用 width: 100%，容易触发重排、拉伸失真、甚至被父容器裁剪。Bootstrap 的 .ratio 类靠 padding-top 百分比实现固有宽高比（aspect ratio），不依赖元素自身尺寸，也不触发重绘。
实际使用中常见错误是：把 <iframe></iframe> 直接塞进 <div class="ratio"> 却忘了加 <code><div class="ratio-box"> 包裹层（Bootstrap 5.3+ 已改用 <code><div class="ratio"> + 子元素 <code><div class="ratio-box"> 或直接子元素加 <code>position: absolute）；旧版 Bootstrap 4 没这个类，强行套用会失效。
-
.ratio必须配合子元素的position: absolute; top: 0; left: 0; width: 100%; height: 100%才能生效 - 支持的预设比例有：
.ratio-1x1、.ratio-4x3、.ratio-16x9、.ratio-21x9，对应 padding-top 值分别是 100%、75%、56.25%、42.857% - 自定义比例需手动写 CSS，例如
.ratio-3x2 { --bs-aspect-ratio: 66.666%; }，再通过padding-top: var(--bs-aspect-ratio)注入（Bootstrap 5.3+ 支持 CSS 变量驱动）
.ratio 和原生 aspect-ratio CSS 属性冲突吗？
会。如果同时存在 .ratio 类和 style="aspect-ratio: 16/9"，且子元素没设 position: absolute，.ratio 的 padding-top 逻辑会被覆盖或表现异常——因为原生 aspect-ratio 是作用于盒模型本身的，而 .ratio 是 hack 式模拟。
推荐策略：新项目优先用原生 aspect-ratio（Chrome 88+、Firefox 89+、Safari 15.4+ 已全支持），仅对需兼容旧版 Safari（.ratio。
- Bootstrap 5.3 默认仍保留
.ratio，但文档已标注“legacy fallback” - 检查是否生效：打开 DevTools → 查看元素 computed 样式中
padding-top是否为预期百分比值，且子元素是否撑满父容器 - 若用了
aspect-ratio还加.ratio，反而可能造成双倍 padding 或高度塌陷
.ratio 容器嵌套 .container 会出什么问题？
左右外边距错位、内容偏移、响应式断点失效。因为 .container 自带媒体查询控制宽度 + 水平居中（margin-left: auto; margin-right: auto），而 .ratio 要求父容器无干扰布局流——一旦 .ratio 被包在 .container 内，其内部 padding-top 计算基准仍是父容器宽度，但父容器本身在不同屏幕下宽度跳变（如 576px、768px、992px），导致比例视觉抖动。
正确做法是让 .ratio 直接挂载在 .container-fluid 下，或脱离任何带 margin/padding 的容器。
- 禁止写：
<div class="container"><div class="ratio ratio-16x9">...</div></div> - 推荐写：
<div class="container-fluid py-3"><div class="ratio ratio-16x9">...</div></div>（py-3控制上下间距，不破坏水平 stretch） - 若必须居中内容，应在
.ratio-box内部用mx-auto或 flex 对齐，而非靠外层.container
移动端下 .ratio 容器里文字溢出或按钮点击区域变小怎么办？
这不是 .ratio 的问题，而是它强制子元素绝对定位后，脱离文档流，导致内部文本、按钮等默认尺寸不再随视口缩放——尤其在 iOS Safari 中，font-size 和 touch-action 表现更敏感。
关键补救点：所有可交互元素（<button></button>、<a></a>、表单控件）必须显式设置 min-width、min-height 和 font-size，不能依赖父容器自动继承。
- 加
style="min-height: 44px; min-width: 44px;"保证 iOS 触摸热区达标 - 用
vw单位控制字体（如font-size: clamp(1rem, 2.5vw, 1.25rem)），避免固定px在小屏上过小 - 避免在
.ratio-box内用display: grid布局，某些旧版 WebView 对绝对定位 + grid 兼容差，会丢子项
真正难处理的是混合场景：比如一个 .ratio-16x9 里既要放自适应视频，又要叠加半透明标题栏和操作按钮——此时 padding-top 的静态计算就扛不住动态内容了。这时候就得放弃 .ratio，改用 JS 监听 resize + requestAnimationFrame 动态设 height，或者直接切到 CSS aspect-ratio + contain: layout 组合。别硬撑。
