Bootstrap 5 制作专业404页需用.d-flex.flex-column.min-vh-100全高布局，禁用已废弃的jumbotron和带干扰样式的card；图片须设固定height防塌陷，文字偏小或按钮失效多因viewport缺失或CSS加载不全。
Bootstrap 5 完全能做出专业级 404 页面，但必须绕开已废弃组件、避免嵌套陷阱、手动控制高度 fallback——否则页面在移动端塌陷、文字偏小、图片错位全是常态。
为什么不能用 jumbotron 或 card 包整个 404 区域
Bootstrap 5 已正式移除 jumbotron，硬写会触发控制台警告；card 自带 padding、border 和 box-shadow，在纯错误页里不仅多余，还会干扰 Flex 垂直居中逻辑。更关键的是：它默认设了 min-width: 0，配合 flex-grow-1 时容易导致内容被压缩变形。
推荐结构：<div class="d-flex flex-column min-vh-100"> 作外层容器，<main class="flex-grow-1 d-flex align-items-center"> 包裹核心内容，按钮和文案直接放里面，不套任何语义容器。
img-fluid 加载失败后塌陷怎么办
很多 404 页面加了插画图，但路径出错或 CDN 不可用时，<img> 高度坍缩，把 "404" 文字顶到屏幕外——这不是 JS 问题，是 CSS 缺失 fallback。
- 必须加
height固定值（如style="height: 200px;"），防止渲染空白 - 用
img-fluid mx-auto d-block确保缩放居中，不溢出容器 - 补一层 CSS background fallback：
img { background: #f8f9fa url("data:image/svg+xml,%3Csvg") no-repeat center / contain; } - 加上
alt=""和aria-hidden="true"，避免读屏器误读装饰图
文字和按钮没反应？先查这两个地方
部署后发现 display-1 字号偏小、btn-primary 按钮点击无反馈，大概率不是代码写错，而是环境配置疏漏：
- 确认引入的是完整 Bootstrap 5 CSS + JS，尤其注意
popper.min.js—— 虽然按钮本身不依赖它，但某些版本的btn-group行为或 tooltip 会间接影响样式计算 - 检查 HTML 是否漏了
<meta name="viewport" content="width=device-width, initial-scale=1">，缺这个移动端vh单位会失效，min-vh-100直接不占满屏幕
服务器返回状态码不是 404 怎么办
再好看的页面，如果服务器返回的是 200 OK 或 302 Found，搜索引擎就当它是正常页面索引，死链接永远清不完。
务必验证：curl -I https://yoursite.com/this-does-not-exist 返回头里要有 HTTP/2 404；Apache 用户检查 .htaccess 里是否写了 ErrorDocument 404 /404.html；Nginx 用户确认 error_page 404 /404.html 并且该文件在 root 路径下可访问。别信浏览器地址栏——它只显示最终 URL，不反映真实状态码。
最常被忽略的一点：所有工具类都依赖 Bootstrap 的 CSS 文件加载顺序和完整性，哪怕只是少了一行 @import 或漏了一个 flex 工具类，d-flex 就可能完全失效，而你只会看到一堆文字堆在左上角。
