.ratio类本身无效，必须配合.ratio-16x9等比值类及子元素width:100%;height:100%才生效；常见错误是仅加.ratio、漏比值类或子元素未设宽高满铺。
直接给 <video></video> 或 <img> 加 .ratio 类完全没用——它只对父容器生效，且必须配合具体比值类和子元素宽高控制。
为什么 .ratio 加了没反应？
因为 .ratio 本身不定义比例，它只是个基础修饰类，真正起作用的是 .ratio-16x9 这类带比值的类。常见错误包括：
- 只写
<div class="ratio"><video></video></div>，漏掉.ratio-16x9等具体比值类 - 子
<video></video>没设class="w-100 h-100"或等效样式（width: 100%; height: 100%） - 子元素用了
max-width: 100%或height: auto，导致高度塌陷 - 在
display: none的 Tab 或 Modal 里提前渲染了.ratio结构，宽度为 0 导致 padding-top 计算失效
.ratio-16x9 和 .ratio-4x3 在移动端显示异常怎么办？
这不是类写错了，而是 .ratio 依赖父容器宽度计算 padding-top 百分比。一旦父容器宽度动态归零（比如 Tab 切换、sidebar 展开后），高度就丢了。应对方式：
- 避免在
display: none容器中初始化.ratio；改用visibility: hidden或等 DOM 可见后再挂载 - 父容器宽度可能变化时（如 resize、折叠侧边栏），手动触发重绘：
element.style.transform = 'translateZ(0)'或读取offsetHeight - 别指望
max-width或vw直接控制子元素——会绕过.ratio的高度保障机制
自定义比例（比如 9:16 竖屏或 21:9 超宽）怎么写？
Bootstrap 5.3+ 推荐用 CSS 变量，兼容所有内置行为：
.ratio-9x16 { --bs-aspect-ratio: 177.777778%; }
.ratio-21x9 { --bs-aspect-ratio: 42.857%; }
注意两点：
- 值是
height / width * 100%，不是比值本身（9:16 → 16÷9×100% ≈ 177.78%） - 自定义类名必须带
.ratio-前缀，否则.ratio容器的::before伪元素不匹配 - CSS 必须放在 Bootstrap 主样式表之后，否则变量未定义
全屏时 .ratio 容器高度归零怎么处理？
iOS Safari 和部分 Android 浏览器进入原生全屏后，<video></video> 会脱离文档流，外层 .ratio 容器高度崩塌。这不是 Bootstrap 的 bug，是浏览器行为。必须监听事件临时接管：
- 监听
webkitbeginfullscreen，移除.ratio类，加position: fixed; top: 0; left: 0; width: 100vw; height: 100vh - 监听
webkitendfullscreen，恢复.ratio类和相对定位 - 别依赖
object-fit或aspect-ratio自动修复——全屏下这些属性已不参与布局计算
真正容易被忽略的是：比例控制从来不是“设个类就完事”，它始终在和父容器宽度、子元素渲染时机、浏览器全屏策略、以及 CSS 层叠顺序博弈。越想“全自动”，越要盯紧这些边界条件。
