bootstrap响应式类基于预编译媒体查询与类名强绑定，自定义@media需匹配其断点阈值（如lg为992px），否则类名无效；改断点须重编译sass并同步更新关联变量，否则回退默认值。
你的媒体查询没匹配Bootstrap的断点阈值
Bootstrap的响应式类（如.col-md-6、.d-lg-none）背后是硬编码的媒体查询，比如v5.3+中@media (min-width: 768px)对应sm，@media (min-width: 992px)对应lg。你手写@media (min-width: 1024px)，但HTML里还用col-lg-6，那它依然只在992px触发——类名和你的查询完全不挂钩。
常见错误现象：
-
.col-xxl-6写了但没效果，因为Bootstrap编译时根本没生成这个类（除非你改了Sass变量并重新构建） - 自己写的
@media (min-width: 1024px) { .my-grid { ... } }样式被.col-lg-6覆盖，不是权重问题，是压根不在同一套规则体系里
自定义CSS加载顺序或选择器权重不够
即使断点值写对了，也得让浏览器“看得到、认得准、压得过”。CDN引入bootstrap.min.css后，你的CSS必须满足三个条件才能生效：
- 文件在
<link>标签中排在Bootstrap之后（不是“放在body里就行”，要检查Network面板确认加载顺序） - 选择器保持简洁：
.container可以，div .container会降权，body .container更糟 - 别依赖
!important强行覆盖——它可能堵死后续所有断点切换，比如.sidebar { display: flex !important }会让d-md-none彻底失效
Sass项目里改了变量却没生效
这是静默失败高发区：你以为改了$grid-breakpoints就完事，其实编译链上一环松动，整套栅格就回退默认值。
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/bootstrap"之前重定义变量 -
$grid-breakpoints必须包含全部键名：xs、sm、md、lg、xl、xxl，漏一个，对应断点就用Bootstrap默认值 - 改了断点，
$container-max-widths、$grid-gutter-width等关联变量也得同步更新，否则.container宽度错位、栅格间距崩坏
浏览器根本没应用你的CSS规则
Network面板显示200 OK ≠ 样式已生效。真正卡住人的，往往是规则压根没进层叠队列。
- 打开DevTools Elements面板，选中目标元素，在Styles侧栏搜索你的选择器（如
.container），看是否出现；不出现=没匹配上或文件内容为空 - 如果出现但被划掉，把鼠标悬停在那条规则上，看“Computed”里实际生效的值来自哪个文件、是否带
!important - React/Vue项目中，CSS文件若通过组件内
import引入，可能被scoped隔离，需确保它在入口文件全局加载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
