Bootstrap 5 彻底删除了 .jumbotron 类，官方自2021年v5发布起即移除，非弃用而是源码级删除；需用 .container-fluid + .bg-* + .py-5 + .display-4 等工具类手动组合实现等效巨幕效果。
Bootstrap 5 里根本没有 .jumbotron 这个类——不是你漏写了、没引入，也不是 CDN 加载失败，是官方在 2021 年发布 v5 时就把它从源码里彻底删了。
Bootstrap 5 还有没有 jumbotron 类？
没有。你在 Bootstrap 5.3.3（截至 2025 年 10 月）的 CSS 文件里搜不到 .jumbotron，文档里也查不到。如果你升级后页面上原来用 class="jumbotron" 的区域突然变小、失色、没内边距，那基本就是这个原因。
- 它不是“弃用（deprecated）”，而是“删除（removed）”——连兼容层都没留
-
.jumbotron-fluid同样不存在，别白费劲去试 - 浏览器控制台不会报错，但该类名会被完全忽略，等效于写了个无意义字符串
怎么用工具类手搭一个等效的巨幕块？
核心是组合容器 + 背景 + 间距 + 排版，而不是复刻一个新 class。关键工具类必须显式声明：
-
.container-fluid：全宽布局首选；若要居中+最大宽度，改用.container -
.bg-dark/.bg-light/.bg-primary：必须手动指定背景，否则默认透明 -
.py-5或.min-vh-100：解决“高度塌陷”问题——纯文字少时，div高度为 0，背景图根本看不见 -
.text-white/.display-4/.fw-bold：文字样式不再继承自 jumbotron，得一个个加 -
.rounded-3/.shadow：圆角和阴影也得手动开，v5 不再内置
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container-fluid py-5 bg-dark text-white rounded-3"> <h1 class="display-4 fw-bold">欢迎来到首页</h1> <p class="lead mb-0">这是用工具类手搭的等效块</p> </div>
加背景图后图不显示？三个条件缺一不可
Bootstrap 工具类不处理背景图，必须自己写 CSS，且以下三点同时满足才能正常渲染：
- 容器要有明确高度：
min-height: 500px或min-vh-100—— 文字少时尤其关键 - 路径是相对于 HTML 文件的，不是 CSS 文件：
background-image: url(./img/hero.jpg)必须能在浏览器地址栏直接拼出并访问到 - 必须设
background-size: cover和background-position: center，否则图会拉伸、偏移或只显示左上角
推荐写法（加在 style 或单独 CSS 中）：
<div class="container-fluid min-vh-100" style="background-image: url(./img/hero.jpg); background-size: cover; background-position: center;">
文字压在背景图上看不清怎么办？
Bootstrap 不提供自动遮罩，最简可靠方案是用伪元素叠加一层半透黑：
- 避免污染 HTML 结构，不用额外
<div> 层<li>遮罩必须用 <code>::before，且z-index要低于文字内容 - 记得给容器设
position: relative，否则伪元素定位失效
对应 CSS 示例：
.jumbotron-equivalent {
position: relative;
}
.jpeg-equivalent::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.jpeg-equivalent > * {
position: relative;
z-index: 2;
}最容易被忽略的是高度控制和背景图三要素的绑定关系——哪怕其他都对，只要容器 min-height 缺失或 background-size 写成 contain，图就会消失或变形，而且这种问题在开发机本地常看不出来，部署后才暴露。
