.ratio类必须配合具体比例类（如ratio-16x9）才能生效，因其本身仅为基类，不定义宽高比，依赖比例类设置--bs-aspect-ratio变量并通过::before伪元素撑高，否则容器高度塌陷。
Bootstrap 的 .ratio 类为什么必须配具体比例类才能生效
.ratio 本身只是个容器修饰基类，不带任何 padding 或宽高逻辑；它依赖 ::before 伪元素 + CSS 变量 --bs-aspect-ratio 来撑出高度。没配 .ratio-16x9 这类具体比例类，--bs-aspect-ratio 就是未定义状态，结果就是容器高度塌成一条线。
常见错误写法：<div class="ratio"><iframe src="..."></iframe></div> —— 缺少比例类，也漏了子元素的 w-100 h-100。
- 必须组合使用，例如：
<div class="ratio ratio-16x9"><iframe class="w-100 h-100"></iframe></div> - 子元素不能只设
width: 100%，height: 100%缺一不可，否则无法覆盖伪元素撑出的高度空间 - 自定义比例（如 9:16）要写
.ratio-9x16 { --bs-aspect-ratio: 177.777778%; }，注意值是height / width × 100%，不是比值本身 - 类名必须以
.ratio-开头，否则伪元素选择器不匹配
直接给 <iframe></iframe> 加 w-100 或 .embed-responsive-item 为什么不行
Bootstrap 的响应式逻辑不是靠“拉伸 iframe”，而是靠父容器用 padding-top（BS4）或 ::before（BS5）预留固定比例高度，再让子元素绝对定位/全尺寸覆盖来实现的。把类加在 <iframe></iframe> 自身上，等于绕过了这个机制。
典型失败现象：视频被横向拉宽、上下留白、黑边严重，甚至完全溢出容器。
- BS4 中：
<iframe></iframe>必须是.embed-responsive的直接子元素，并加.embed-responsive-item - BS5 中：
<iframe></iframe>必须在.ratio容器内，且加w-100 h-100（不能用max-width或object-fit替代） - YouTube/Vimeo 默认嵌入代码带
width="560" height="315"，必须手动删掉这两个属性，否则会强制覆盖 CSS 尺寸 - 如果用 JS 动态插入 iframe，得确保插入后父容器已渲染完成（避开
display: none状态），否则 padding 计算为 0
.ratio 在 Modal、Tab 切换等动态场景下高度塌陷怎么办
因为 .ratio 高度依赖父容器宽度计算 padding-top，而 display: none 或未渲染完成时宽度为 0，导致最终高度为 0。这不是 bug，是 CSS 计算时机问题。
解决思路不是改 Bootstrap 源码，而是控制渲染时机或触发重绘。
- 避免在
display: none的区域里初始化.ratio结构；改用visibility: hidden或延迟到显示后再挂载 - Tab 切换后，手动调一次
el.offsetHeight（读取 layout 属性）可强制浏览器重算 padding - 对容器加
transform: translateZ(0)也能触发 GPU 重绘，但慎用于动画频繁区域 - Modal 中建议用
shown.bs.modal事件钩子，在弹出完成后再注入 iframe 结构
用 .ratio 做视频背景时，为什么 object-fit: cover 不起作用
.ratio 是为「嵌入式内容」设计的，比如 YouTube iframe，它假设子元素是块级、无 margin、全尺寸覆盖。而视频背景需要的是「铺满容器并裁剪适配」，这和 .ratio 的定位逻辑冲突。
直接套 .ratio-16x9 + <video></video> + object-fit: cover，结果往往是控件错位、顶部/底部被截、iOS 全屏后高度归零。
- 视频背景该用
position: absolute+top: 0; left: 0; width: 100%; height: 100%+object-fit: cover+z-index: -1 - 必须设
poster属性，防止加载空白闪动 - 移动端需额外加
playsinline和muted，否则 iOS Safari 强制跳原生全屏 -
.ratio容器在全屏时会失效——浏览器把<video></video>提升到顶层，脱离文档流，此时得监听webkitbeginfullscreen临时移除.ratio并设position: fixed
实际项目里最容易被忽略的，是比例类和子元素样式之间的强耦合关系：缺一个 class、少一行 CSS、多一个内联 width，整个响应式就断了。它看起来是个“开箱即用”的组件，实则每层都卡着精确的 DOM 结构和样式链。
