根本原因是SSR时Bootstrap CSS未注入HTML head导致样式丢失；需在服务端显式引入bootstrap.min.css，避免组件内动态import，并检查purge工具误删类名及data-bs-*属性兼容性问题。
根本原因不是 Bootstrap 本身失效，而是 SSR 渲染时 CSS 工具类未被正确注入或作用域隔离导致样式丢失。
SSR 中 bootstrap.css 没加载进 HTML 字符串
服务端渲染只输出 HTML 字符串，若未显式将 Bootstrap 的 CSS 内容注入到 html 模板的 中，浏览器拿到的初始 HTML 就没有对应样式规则——工具类如 text-center、bg-primary 自然不生效。
- Next.js 用户需在
app/layout.tsx或pages/_document.tsx中用getInitialProps或createEmotionCache（若配 Emotion）配合css提取；但更直接的是：把bootstrap.min.css通过link标签硬引入静态资源，并确保它在首屏 HTML 中存在 - Nuxt 3 需在
nuxt.config.ts的css数组里添加'bootstrap/dist/css/bootstrap.min.css'，否则构建时不打包、SSR 时不注入 - Vite + SSR（如 vite-plugin-ssr）需手动在
renderToString()后拼接<style>${bootstrapCSS}</style>到，不能只靠import 'bootstrap/dist/css/bootstrap.min.css'
class 被 SSR 和 CSR 两次解析，但样式未复用
某些框架（如 Next.js App Router）默认启用 CSS 模块化或 CSS-in-JS，若 Bootstrap 是通过 JS 动态 import（例如在组件里 import 'bootstrap'），它的 CSS 只会在客户端执行时才加载——服务端生成的 HTML 有 class="p-3 text-muted"，但没对应规则，首屏就裸奔。
- 避免在组件内部
import 'bootstrap/dist/css/bootstrap.min.css'：这会导致 CSS 只走 client bundle，SSR 不感知 - 确认构建产物中是否存在
bootstrap.min.css的内联内容或外链：用 curl 请求首页 HTML，搜索text-muted是否出现在<style></style>或<link>加载的 CSS 文件里 - 若用了 Tailwind 或其他 CSS 工具库，检查是否启用了
content扫描，意外 purge 掉了 Bootstrap 的工具类名（比如bg-info被当成未使用类删掉了）
Bootstrap 5+ 的 RTL 或 data-bs-* 属性干扰 SSR 输出
Bootstrap 5 默认依赖 data-bs-toggle 等属性控制行为，但 SSR 渲染器（如 React Server Components）可能过滤或转义这些自定义属性，导致 DOM 结构和客户端期望不一致；更隐蔽的是，某些 SSR 框架对 dir="rtl" 响应式类（如 ms-2）做预处理失败，造成 margin 类错位。
- 不要在服务端动态生成含
data-bs-*的元素（如<button data-bs-toggle="modal"></button>）：React 18 的 RSC 对非标准属性支持不稳定，建议改用纯 class 控制外观，交互逻辑延迟到useEffect中初始化 - RTL 类（
ms-2/me-2）在 SSR 时若未指定dir属性或html[dir]，Bootstrap 的媒体查询可能不触发，表现为“看起来没生效”——实际是 CSS 规则没匹配上 - 检查是否启用了
purgeCSS或unocss等工具：它们可能把bg-gradient这类复合工具类误判为未使用而剔除
真正卡住人的往往不是“有没有引入 Bootstrap”，而是“有没有让它的 CSS 在服务端渲染那一刻就真实存在于响应 HTML 的 里”。哪怕多加一行 <link rel="stylesheet" href="/bootstrap.min.css">，也比依赖 JS 加载更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
