Bootstrap 5 404 页面应使用 d-flex + min-vh-100 实现全屏撑开与垂直居中，外层 flex-column，内容区用 flex-grow-1 + align-items-center 居中，避免废弃的 jumbotron 或干扰视觉的 card；图片需 img-fluid mx-auto d-block + 固定高度 + SVG fallback，确保加载失败不塌陷；务必包含 viewport meta 和完整 Bootstrap 资源。
直接用 Bootstrap 5 的工具类就能做出响应式、语义清晰、不依赖额外 CSS 的 404 页面——关键不是堆组件，而是控制好高度、居中逻辑和降级容错。
用 d-flex + min-vh-100 解决全屏撑开与垂直居中失效问题
很多 404 页面在内容少时塌缩到顶部，或在移动端错位，根本原因是没正确处理视口高度和 Flex 布局层级。
-
min-vh-100比vh-100更稳妥：防止内容超长时溢出被截断 - 外层必须用
flex-column，不能嵌套两层.row—— 否则 margin 折叠+对齐失效 - 居中区域单独用
<main class="flex-grow-1 d-flex align-items-center"></main>，靠flex-grow-1吃掉剩余空间，再用align-items-center垂直居中，比mt-5或text-center更可靠
避免用 jumbotron 或 card 包裹整个错误内容
Bootstrap 5 中 jumbotron 已废弃，card 自带 padding/border/box-shadow，在纯错误页里反而干扰视觉节奏和 Flex 居中计算。
- 控制台会报
Deprecated: jumbotron has been removed警告 -
card的默认padding: 1.25rem和border-radius让“404”数字显得小而局促 - 真正需要的只是语义容器：
div外层 +main内容区 +footer按钮区，各司其职
图片加载失败时页面不塌陷的硬性处理
插图是 404 页面的灵魂，但路径错误、CDN 不可用、网络中断都会让 <img alt="Bootstrap 如何实现一个漂亮的 404 错误页面 Bootstrap 错误页优缺点" > 变成一条空白横杠，把文字顶出屏幕。
- 必须加
class="img-fluid mx-auto d-block"确保缩放和居中 - 显式设置
style="height: 200px;"（或用h-200），防止加载失败后高度坍缩 - 补一层 CSS fallback：
img { background: #f8f9fa url("data:image/svg+xml,%3Csvg...") no-repeat center / contain; }，比 JS 的onerror更稳定（尤其在 iOS Safari 中） - 加上
alt=""和aria-hidden="true"，既满足可访问性，又避免读屏器误读装饰图
部署后按钮没反应或文字偏小？先查这两个地方
不是代码写错了，而是环境链路断了。
- 确认引入的是完整 Bootstrap 5 CSS + JS，特别是某些版本的
btn行为依赖popper.min.js（哪怕你没用 dropdown） - 检查 HTML 里有没有漏掉
<meta name="viewport" content="width=device-width, initial-scale=1">—— 缺这个，移动端 flex 布局和字体大小全乱
真正容易被忽略的是：错误页常被当作静态资源直接扔进 /static/error/，但没配好 MIME 类型（比如 .woff 字体 404）或没启用静态资源缓存策略，导致图标、字体、CSS 加载失败，整页样式失焦。这些不在 HTML 里，但在服务器配置里。
