Bootstrap 5 中需自定义 .ratio-21x9 类并设置 --bs-aspect-ratio: 42.857%，子元素必须添加 w-100 h-100，且确保父容器有有效宽度，否则比例失效。
Bootstrap 5 中怎么用 .ratio 实现 21:9 视频比例
Bootstrap 5 默认不提供 .ratio-21x9 类，但可以轻松复用其 CSS 机制实现——关键不是“有没有”，而是“怎么配对”。.ratio 本身只是容器基类，真正起作用的是 --bs-aspect-ratio 变量值，它决定了伪元素撑出的高度百分比（height / width × 100%）。
21:9 的宽高比对应 9 ÷ 21 ≈ 42.857%，必须写成带小数的百分比值，不能四舍五入为 43% 或省略小数位，否则 padding 计算偏差会导致上下留白或裁剪。
-
.ratio-21x9必须声明在项目 CSS 中，且类名严格以.ratio-开头，否则.ratio::before伪元素不匹配 - Bootstrap 5.3+ 推荐写法：
.ratio-21x9 { --bs-aspect-ratio: 42.857%; } - Bootstrap 5.0–5.2 可直接覆盖伪元素：
.ratio-21x9::before { padding-top: 42.857%; } - 子元素（如
<iframe>或<video>）必须同时加w-100 h-100，缺一不可
Bootstrap 4 中如何手动支持 21:9 嵌入
Bootstrap 4 没有内置 .embed-responsive-21by9，但它的 .embed-responsive 容器逻辑完全基于 padding-bottom 百分比，所以你可以自己加一个类，和官方类保持一致风格。
21:9 对应的 padding-bottom 是 42.857%，和 BS5 的计算逻辑一致。不要用 padding-top，BS4 全部用 padding-bottom 来避免 margin 折叠干扰。
- 在自定义 CSS 中添加：
.embed-responsive-21by9 { padding-bottom: 42.857%; } - HTML 结构必须严格：
<div class="embed-responsive embed-responsive-21by9"><iframe class="embed-responsive-item" ...></iframe></div> - 别把
.embed-responsive-21by9单独用——它必须和.embed-responsive同时存在，否则容器高度塌陷 - 如果视频源是本地
<video>，确保controls属性开启，且资源路径可跨域访问
为什么加了 .ratio-21x9 还是没效果
最常卡在这三个地方：类名拼错、子元素没设宽高、父容器宽度为 0。尤其是动态渲染场景（比如 Tab 切换后、Modal 弹出后、AJAX 加载后），.ratio 容器可能还没拿到真实宽度，padding-top 就按 0 计算了。
- 检查浏览器开发者工具里，
.ratio-21x9::before是否渲染出来，padding-top值是否为42.857% - 确认子元素是否有
width: 100%; height: 100%（w-100 h-100是等效的，但不能只写w-100） - 如果容器初始状态是
display: none，改用visibility: hidden或在显示后再插入 DOM - 遇到 resize 或 sidebar 展开导致比例错乱，临时触发重绘：
element.style.transform = 'translateZ(0)'或读取offsetHeight
21:9 视频在移动端显示异常怎么办
21:9 是超宽屏比例，手机竖屏下天然会左右大幅裁剪——这不是 Bootstrap 的 bug，而是物理限制。强行“适配”反而破坏内容完整性。
- 优先考虑在小屏断点（如
sm或md）降级为.ratio-16x9，用媒体查询重设变量：@media (max-width: 768px) { .ratio-21x9 { --bs-aspect-ratio: 56.25%; } } - 不要依赖
object-fit: contain或scale()强行缩放，会模糊或拉伸画面 - 若必须保留 21:9，建议加提示文案：“横屏观看体验更佳”，并监听
orientationchange事件做轻量反馈 - YouTube/Vimeo 嵌入链接本身不支持服务端裁剪为 21:9，所以实际播放器仍按原始比例渲染，外层容器只是“框住”它
--bs-aspect-ratio 的值、子元素的 h-100、以及动态场景下的宽度初始化时机。 
