bootstrap 5组件失效主因是container→row→col结构缺失、bootstrap.bundle.min.js未正确引入、data-bs-toggle等属性未手动实例化。需检查network确认css/js加载成功，console排查js错误，elements验证样式来源，并严格遵循三层嵌套与bundle版js引入规范。
直接在 index.html 里集成 Bootstrap，5 分钟内就能让按钮、导航栏、栅格全部渲染出来——卡住的从来不是功能，而是 container 缺失、bootstrap.bundle.min.js 没引对、或者 data-bs-toggle 写了却没实例化。
为什么加了 class 却没样式？先查这三个地方
写了 btn btn-primary 还是灰扑扑的普通按钮？别急着改 CSS，先打开浏览器开发者工具（F12）盯住：
-
Network面板：确认bootstrap.min.css和bootstrap.bundle.min.js都返回了200；出现404或CORS错误，说明 CDN 地址抄错、路径写成相对路径（比如./css/bootstrap.min.css），或服务端没配好静态资源路由 -
Console面板：看到ReferenceError: bootstrap is not defined？JS 文件根本没加载成功；看到TypeError: Cannot read property 'addEventListener' of null？DOM 元素还没挂载，JS 就执行了 -
Elements面板：点一个带container的<div>，右侧 <code>Styles里搜max-width，如果值不是来自bootstrap.min.css，说明 CSS 没生效Bootstrap 5 必须用 bootstrap.bundle.min.js，不是 .min.js
导航栏收不起来、下拉菜单点不开、模态框点不动——90% 是因为只引入了
bootstrap.min.js。Bootstrap 5 的交互组件（Dropdown、Modal、Tooltip）依赖 Popper 实现定位，而bootstrap.bundle.min.js已内置 Popper；单独引bootstrap.min.js会直接报错或静默失效。- ✅ 正确写法（放在
- ✅ 正确写法（放在
