.ratio类本身不生效，必须配合比值类（如.ratio-16x9）及子元素的width:100%;height:100%才能起作用；常见错误是仅写.ratio、漏比值类或未设子元素宽高，导致塌陷。
Bootstrap 5 的 .ratio 类为什么加了没反应
因为 .ratio 本身不生效，它只是个容器修饰类，必须配合具体比值类（如 .ratio-16x9）和子元素的显式宽高设置才能起作用。常见错误是只写 <div class="ratio"><iframe></iframe></div>，漏掉比值类，也没给 iframe 设 width: 100%; height: 100%。
必须同时满足三个条件：
-
<div>同时有.ratio和.ratio-16x9（或其他比值类） -
iframe是它的直接子元素 -
iframe必须带width="100%" height="100%"或对应工具类（如w-100 h-100）
否则会塌成一条线，或只显示左上角一小块。
YouTube 嵌入代码怎么改才适配 .ratio
官方生成的 YouTube 嵌入代码默认带 width="560" height="315"，这和响应式逻辑完全冲突——固定尺寸会覆盖 CSS 的百分比计算。
要手动清理并重写：
- 删掉
width和height属性（不是设为auto，是彻底移除） - 确保
iframe是.ratio容器的**直接子级**，不能套多一层div - 加
title和allowfullscreen（无障碍和全屏必需）
正确写法示例（BS5）：
<div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/xxx" title="YouTube video" allowfullscreen></iframe> </div>
自定义比例（比如 9:16 竖屏）怎么加
Bootstrap 不提供 .ratio-9x16 这种开箱即用的类，但机制透明：它靠 --bs-aspect-ratio 变量控制 ::before 的 padding-top 值（= 高 ÷ 宽 × 100%）。
9:16 → 16 ÷ 9 × 100% ≈ 177.777778%，所以：
- 在项目 CSS 中（且必须在 Bootstrap CSS 之后加载）加一行：
.ratio-9x16 { --bs-aspect-ratio: 177.777778%; } - HTML 中用：
<div class="ratio ratio-9x16"><iframe ...></iframe></div> - 别用
padding-top直接覆盖，会和 Bootstrap 的伪元素逻辑打架
注意：类名必须以 .ratio- 开头，否则伪元素不匹配。
Tab 切换或 Modal 里视频高度塌陷怎么办
当 .ratio 容器初始处于 display: none 状态（比如未激活的 Tab 页、隐藏的 Modal），浏览器无法计算父容器宽度，导致 padding-top 计算为 0，高度消失。
解决思路不是“等它显示后再 JS 补宽高”，而是避免触发这个失效条件：
- 把
display: none换成visibility: hidden+position: absolute（保持盒模型） - 或者延迟渲染：等 Tab 切换完成、Modal 显示后再插入
.ratio结构 - 如果必须动态加载，可强制回流：
给容器加style="transform: translateZ(0)"或读一次offsetHeight
这个坑在 SPA 或复杂交互页里高频出现，但根源不在 .ratio 本身，而在 DOM 渲染时机。
