Bootstrap 框架中的比例组件 Ratio 如何自定义 Bootstrap 比例优缺点

苏承栈

2026-10-24 • 👁 0人浏览过

Bootstrap 5.3+ 自定义 Ratio 比例必须用 --bs-aspect-ratio 变量（如 .ratio-21x9 { --bs-aspect-ratio: 42.857%; }），类名须以 .ratio- 开头，且 CSS 需在 Bootstrap 后加载；旧版需改用 ::before { padding-top: ... }。自定义 Bootstrap Ratio 比例类必须用

--bs-aspect-ratio

变量 Bootstrap 5.3+ 的

.ratio

系统不靠新增 CSS 规则，而是通过 CSS 自定义变量

--bs-aspect-ratio

控制伪元素的

padding-top

值（即高 ÷ 宽 × 100%）。直接写

.ratio-21x9 { padding-top: 42.857% }

会失效，因为 Bootstrap 的

.ratio::before

只读取该变量。正确做法是在项目 CSS 中（且必须在 Bootstrap 样式之后加载）添加：

.ratio-21x9 {
  --bs-aspect-ratio: 42.857%;
}

然后 HTML 中使用：




类名必须以 .ratio-


开头，否则伪元素不匹配
旧版本（5.0–5.2）不支持
--bs-aspect-ratio
，需改用
.ratio-21x9::before { padding-top: 42.857% }
覆盖
别用
calc()
动态计算百分比——CSS 变量值是字符串，
var(--bs-aspect-ratio)
不支持运行时运算
.ratio
容器里
</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><video></code></div>
不显示的常见原因
不是比例类没生效，而是子元素没满足定位和尺寸条件。Bootstrap 的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.ratio</code></div>
只管容器宽高比，不管子元素怎么铺满。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><iframe></code></div>
必须是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.ratio</code></div>
的**直接子元素**，中间不能套
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div>
必须移除
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">width</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">height</code></div>
内联属性（YouTube 默认代码带
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">width="560" height="315"</code></div>
，会覆盖 CSS 百分比）
推荐加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">class="position-absolute top-0 start-0 w-100 h-100"</code></div>
；仅用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">w-100 h-100</code></div>
不够，因为 iframe 默认不是绝对定位
若用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><video></code></div>
，同样要加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">object-fit: cover</code></div>
（否则可能拉伸或留黑边），Bootstrap 5.3+ 才有
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">object-fit-cover</code></div>
工具类
为什么
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.ratio</code></div>
在 Tab 或 Modal 里突然塌陷
本质是浏览器无法在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">display: none</code></div>
状态下计算父容器宽度，导致
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">padding-top</code></div>
计算为 0 —— 这不是 Bug，是 CSS 渲染机制决定的。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
不要等它显示后再 JS 补宽高，不可靠
把
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">display: none</code></div>
改成
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">visibility: hidden</code></div>
+
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">position: absolute</code></div>
（保持盒模型存在）
或者延迟渲染：Tab 切换完成、Modal
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">shown.bs.modal</code></div>
事件触发后，再动态插入
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.ratio</code></div>
结构
如果父容器宽度会动态变化（比如 sidebar 展开），可加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">transform: translateZ(0)</code></div>
强制重绘，或手动调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.offsetHeight</code></div>
Ratio 的优势和真正容易被忽略的限制
优势很实在：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.ratio-16x9</code></div>
这类类名语义清晰、开箱即用、兼容性好（fallback 用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">padding-top</code></div>
），比手写
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">aspect-ratio</code></div>
更稳，尤其在 Safari 14.5 之前。
但限制点常被低估：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">--bs-aspect-ratio</code></div>
是静态值，不随字体缩放、视口单位或媒体查询自动变化；想响应式切换比例（比如移动端用 9:16），得配合
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">@media</code></div>
重设变量
所有内置比例（
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">16x9</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">4x3</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">21x9</code></div>
）都是固定
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">padding-top</code></div>
百分比，不感知设备像素比，所以在高 DPR 屏幕上依然精准
它依赖
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">position: relative</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">overflow: hidden</code></div>
，如果父级有
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">transform</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">clip-path</code></div>
，可能意外裁切子元素
最麻烦的是：一旦你开始大量自定义比例类，就等于在维护一套和 Bootstrap 解耦的“伪组件系统”——它不参与 SASS 变量体系，也不能 tree-shake，体积悄悄变大。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="jxgpc-article-nav" aria-label="文章导航">

    
                                <a href="http://www.jxgpc.com/pc/29756.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev">
                                    <span>&#8249;</span>
                                    <div>
                                        <div class="jxgpc-article-nav-label">上一篇</div>
                                        <div class="jxgpc-article-nav-title">浅谈JS的this调用对象</div>
                                    </div>
                                </a>
    


    
                                <span class="jxgpc-article-nav-link jxgpc-article-nav-next">
                                    <div>
                                        <div class="jxgpc-article-nav-label">下一篇</div>
                                        <div class="jxgpc-article-nav-title">没有了</div>
                                    </div>
                                    <span>&#8250;</span>
                                </span>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="jxgpc-content-section" style="margin-top: 20px;">
                        <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="jxgpc-article-list">

    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29756.html" class="jxgpc-article-link">浅谈JS的this调用对象</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29744.html" class="jxgpc-article-link">HTML LCP兼容加载优化吗_HTML LCP与加载优化区别【速查】</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29743.html" class="jxgpc-article-link">基于jQuery实现点击弹出层实例代码_jquery</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29739.html" class="jxgpc-article-link">安全扫描：JS代码漏洞检测工具</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29730.html" class="jxgpc-article-link">CSS Grid构建圣杯布局_html/css_WEB-ITnose</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29723.html" class="jxgpc-article-link">typescript能干嘛_typescript可以干嘛</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29714.html" class="jxgpc-article-link">css checkbox radio 选择器技巧_自定义表单样式方案</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29655.html" class="jxgpc-article-link">HTML中混合内容问题的产生原因和修复方法</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29638.html" class="jxgpc-article-link">如何解决 跨域 Iframe 的高度自适应：基于 MutationObserver 的动态同步</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/29631.html" class="jxgpc-article-link">详解HTML中的锚点链接跳转与ID选择器关联</a>
                                <div class="jxgpc-article-meta">2026-10-24</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">推荐阅读</h3>
        <div class="jxgpc-recommend-grid">

    
            <a href="http://www.jxgpc.com/pc/29761.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="Bootstrap 框架中的比例组件 Ratio 如何自定义 Bootstrap 比例优缺点">
                </div>
                <div class="jxgpc-recommend-title">Bootstrap 框架中的比例组件 Ratio 如何自定义 Bootstrap 比例优缺点</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/29756.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="浅谈JS的this调用对象">
                </div>
                <div class="jxgpc-recommend-title">浅谈JS的this调用对象</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/29744.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="HTML LCP兼容加载优化吗_HTML LCP与加载优化区别【速查】">
                </div>
                <div class="jxgpc-recommend-title">HTML LCP兼容加载优化吗_HTML LCP与加载优化区别【速查】</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/29743.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="基于jQuery实现点击弹出层实例代码_jquery">
                </div>
                <div class="jxgpc-recommend-title">基于jQuery实现点击弹出层实例代码_jquery</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">最新文章</h3>
        <ul class="jxgpc-article-list">

    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/29761.html" class="jxgpc-article-link">Bootstrap 框架中的比例组件 Ratio 如何自定义 Bootstrap 比例优缺点</a>
                <div class="jxgpc-article-meta">2026-10-24</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/29756.html" class="jxgpc-article-link">浅谈JS的this调用对象</a>
                <div class="jxgpc-article-meta">2026-10-24</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/29744.html" class="jxgpc-article-link">HTML LCP兼容加载优化吗_HTML LCP与加载优化区别【速查】</a>
                <div class="jxgpc-article-meta">2026-10-24</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/29743.html" class="jxgpc-article-link">基于jQuery实现点击弹出层实例代码_jquery</a>
                <div class="jxgpc-article-meta">2026-10-24</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/29739.html" class="jxgpc-article-link">安全扫描：JS代码漏洞检测工具</a>
                <div class="jxgpc-article-meta">2026-10-24</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/29730.html" class="jxgpc-article-link">CSS Grid构建圣杯布局_html/css_WEB-ITnose</a>
                <div class="jxgpc-article-meta">2026-10-24</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">热门标签</h3>
        <div class="jxgpc-article-tag-list">

    
            <a href="http://www.jxgpc.com/tag/2070" class="jxgpc-article-tag-item">bootstrap</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="jxgpc-footer">
        <div class="jxgpc-container">
            <div class="jxgpc-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a>
                
                <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a>
                
                <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a>
                
                <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a>
                
                <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a>
                
                
            </div>
            <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 极星编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">&#8679;</button>

    <!-- 公共脚本 -->
    <script src="http://www.jxgpc.com/static/v3/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>