CDN引入Bootstrap后样式不生效，先检查三件事：一是link标签是否置于head内且在自定义CSS前；二是是否同时引入bootstrap.bundle.min.js以支持交互组件；三是HTML根元素是否含lang属性及viewport meta标签。
CDN引入Bootstrap后样式不生效？先检查这三件事
不是代码写错了，大概率是加载顺序或基础结构没对。Bootstrap的CSS依赖HTML语义结构和必要的容器类，光引CDN不等于能用。
-
link标签必须放在<head>内，且在自定义CSS之前——否则你的样式会被覆盖 - 所有交互组件（如折叠菜单、模态框）需要同时引入
bootstrap.js或bootstrap.bundle.js，只引CSS没用 - 确保根元素有
<html lang="zh-CN">，部分响应式断点和字体渲染会因缺失语言属性异常
用哪个CDN链接？推荐 jsDelivr + min 版本
国内访问稳定、支持自动协议切换、缓存友好。别用过时的 Bootstrap 4 链接，也别抄官网未压缩版——体积大、加载慢、容易被拦截。
- Bootstrap 5.3 CSS：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> - 带JS的完整版（含Popper）：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> - 不用
integrity属性？可以省，但加了更安全；若项目走严格CSP策略，必须加
class名写对了但布局错乱？注意默认容器限制
Bootstrap 5 默认禁用 box-sizing: border-box 全局继承，且几乎所有栅格（row/col）都依赖父级 container 或 container-fluid。漏掉这个，再标准的 class 也会塌陷。
- 响应式栅格必须嵌套在
<div class="container">内，否则col-md-6等断点失效 -
row的 margin 负值依赖父容器的 padding 补偿，单独放row在body下会溢出 - 自定义样式若重置了
font-size或rem基准（比如设了html { font-size: 12px; }），会导致所有rem单位的间距/圆角错位
移动端点击无反应？JS初始化常被忽略
CDN引入只是加载代码，不等于自动执行。像 dropdown、collapse、modal 这些组件，必须显式触发或依赖 data-bs-* 属性 + 自动初始化逻辑。
立即学习“前端免费学习笔记（深入）”；
- 确保
bootstrap.bundle.min.js在页面底部或使用defer，避免 DOM 未就绪就执行 JS - 手动初始化示例：
const myModal = new bootstrap.Modal(document.getElementById('myModal')) - 如果用了 Webpack/Vite 等构建工具，又混用 CDN，小心重复引入 Popper 导致
TypeError: Popper is not a constructor
最常被跳过的其实是文档结构校验：没有 <meta name="viewport" content="width=device-width, initial-scale=1">，再完整的CDN引入在手机上也白搭。样式加载了，但视口缩放一崩，全盘偏移。
