Bootstrap框架中关于响应式嵌入Ratio的实战-Bootstrap教程-PHP中文网

.ratio类本身不生效，必须配合比值类（如.ratio-16x9）及子元素的width:100%;height:100%才能起作用；常见错误是仅写.ratio、漏比值类或未设子元素宽高，导致塌陷。

bootstrap框架中关于响应式嵌入ratio的实战

Bootstrap 5 的 `.ratio` 类为什么加了没反应

因为 .ratio 本身不生效，它只是个容器修饰类，必须配合具体比值类（如 .ratio-16x9）和子元素的显式宽高设置才能起作用。常见错误是只写 <div class="ratio"><iframe></iframe></div>，漏掉比值类，也没给 iframe 设 width: 100%; height: 100%。

必须同时满足三个条件：

<div> 同时有 <code>.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）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<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- 开头，否则伪元素不匹配。