怎么用CDN引入Bootstrap而不翻车
直接上手就报错 bootstrap.min.js 找不到或者 Uncaught TypeError: bootstrap is not defined，八成是没按依赖顺序引——Bootstrap 5 要求先引 Popper.js（或 @popperjs/core），再引 Bootstrap 自身，但 CDN 上的官方链接已经打包好了这个依赖，所以必须用官网推荐的完整 CDN 地址，不能自己拼。
用 https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css 引样式（放在 <head>）用 https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js 引 JS（.bundle.min.js 版本含 Popper，别用不带 bundle 的）JS 必须放在页面底部，或加 defer 属性；否则 DOM 还没加载完就执行初始化会失败别在本地建 css/ 文件夹然后瞎放 CDN 文件名——CDN 是远程地址，不是本地路径
栅格系统怎么写才不塌
写 col-6 结果两列堆成一列，或者加了 row 还是不换行，大概率是父容器没套 container 或 container-fluid。Bootstrap 栅格依赖「容器 → 行 → 列」三层嵌套，漏一层就失效。
container 是固定宽度居中，container-fluid 是 100% 宽度，选哪个看设计需求，但不能省row 必须是 container 的直接子元素，否则负 margin 会被外层干扰，列会溢出列宽类名如 col-md-4 中的 md 是断点，表示「≥768px 才生效」；小屏下默认是 100%，想小屏也分栏得加 col-6 这种无断点类一行总列数超过 12 不会报错，但会自动换行——这不是 bug，是设计行为，但容易误以为“没生效”
按钮、表单这些组件为啥样式没出来
写了 <button class="btn btn-primary"> 却还是浏览器默认灰按钮，第一反应不是 CDN 没引对，就是 class 名拼错了。Bootstrap 5 移除了所有 btn-default、btn-success 以外的旧语义类，且所有组件 class 都强制带前缀，比如 form-control 不是 input-sm。
确认 class 名是否带 btn-、form-、nav- 等前缀，Bootstrap 5 不再支持无前缀简写表单控件必须加 form-control（<input>）、form-select（<select>）、form-check（复选框）才能有样式自定义颜色用 bg-danger、text-warning 这类工具类，别试图改 btn-primary 的背景色——它本身不含 !important，直接覆盖容易冲突如果用了 Sass 自定义主题但只引了 CSS CDN，那变量重写全无效——CDN 是编译后产物，不支持运行时变量
响应式断点怎么调才不卡住
加了 col-lg-3 在 iPad 上还是 100% 宽，不是断点失效，而是设备实际视口宽度没达到 lg（≥992px）阈值。很多平板横屏是 1024×768，但 viewport 缩放或浏览器 UI 占位会让 CSS 视口变小，导致断点没触发。
立即学习“前端免费学习笔记（深入）”；
务必在 <head> 加 <meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端断点基本废掉断点类名优先级：越靠后的断点覆盖越早的，比如 col-sm-12 col-md-6 表示「小屏全宽，中屏起半宽」，顺序不能反想让某列在某个断点「消失」，用 d-none d-md-block，别用 hidden-xs（Bootstrap 5 已移除）调试时右键检查元素，在 Styles 面板里手动 toggle 断点类，比反复刷新快得多
栅格和响应式看着简单，但断点计算、容器嵌套、CDN 加载顺序这三处一旦出错，表现就非常隐蔽——往往不是报错，而是“看起来差不多”，结果上线后在某个设备上突然错位。多用浏览器开发者工具的 Layout 和 Device Toolbar 实时验证，别只信本地预览。
评论(0)