如何在Bootstrap中制作一个精美的404错误页面

Bootstrap 5 可用栅格和工具类快速构建响应式404页：用.d-flex.flex-column.min-vh-100实现全高布局，display-1.fw-bold控制标题，text-muted设副文案，img-fluid.mx-auto.d-block+固定height防图片加载失败塌陷，避免废弃的jumbotron和冗余card。用 Bootstrap 5 的栅格和工具类快速搭出响应式 404 页面Bootstrap 本身不提供 404 页面模板，但它的 .container、.row、.col 和间距工具类（如 mt-5、text-center）足够支撑一个美观、适配各设备的 404 页面------不用写一行 CSS 就能对齐、居中、留白。关键不是"复刻官网风格"，而是利用现成类控制视觉节奏：.vh-100 让容器占满视口高度，避免内容塌缩在顶部display-1 + fw-bold 控制 "404" 字号和粗细，比用 <h1> 更轻量text-muted 用于副文案，比手动设 color: #6c757d 更可靠，且随主题变色避免嵌套超过两层 .row → 容易错乱 margin，直接用 .d-flex.flex-column 替代为什么不要用 Bootstrap 的 jumbotron 或 card 包裹整个 404 内容jumbotron 在 Bootstrap 5 中已被废弃，强行用会触发警告；card 则自带 padding、border 和 box-shadow，在纯错误页里反而增加视觉噪音，还可能干扰垂直居中逻辑。更稳妥的做法是用语义清晰的结构：外层：一个 <div class="d-flex flex-column min-vh-100">内容区：单独 <main class="flex-grow-1 d-flex align-items-center">，靠 Flex 垂直居中按钮：用 <a href="/" class="btn btn-primary btn-lg">返回首页</a>，不套 card 或 jumbotron这样既兼容 Bootstrap 5 的 utility-first 设计，又不会因组件生命周期变动导致样式断裂。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。