必须严格匹配Bootstrap断点值、加载顺序和选择器权重，否则自定义@media规则无效；如用575.98px而非576px覆盖xs，将bootstrap.min.css置于自定义CSS前，用.container而非div .container等。
不能靠“随便写个@media”覆盖，必须严格匹配Bootstrap原生断点值、加载顺序和选择器权重，否则规则根本不会生效。
为什么直接写 @media (max-width: 768px) 常常失效
Bootstrap 的断点不是整数边界，而是带小数的精确阈值（比如 575.98px），写成 768px 会漏掉宽度恰好为 768px 的设备；更关键的是，Bootstrap 的 CSS 文件里已有一套完整媒体查询链，你写的规则若顺序在前、断点值不严、选择器不简洁，就会被原生规则压住。
常见错误现象：.h2 在手机上字体没变小、.container 宽度卡死不动、自定义 @media 样式在 DevTools 里显示为“被取消”（strikethrough）。
- Bootstrap 4 的 xs 断点上限是
575.98px，不是576px或767px - Bootstrap 5 的 xxl 断点下限是
1400px，不是1399px或1401px - 你的 CSS 文件必须放在
bootstrap.min.css之后引入，否则权重再高也白搭 - 选择器别加多余修饰，比如用
.container，别写成div .container或.container.my-custom
@media (min-width: 1200px) 覆盖 Bootstrap 4 的 .container 宽度
Bootstrap 4 的 .container 在桌面端由 @media (min-width: 1200px) 控制，默认 max-width: 1140px。你想扩到 1280px，就得复刻这条规则，不能只写全局 .container { max-width: 1280px }——那会在手机横屏时强制拉宽，引发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
正确写法（必须放在 Bootstrap CSS 后）：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
- 断点值必须是
1200px，写成1199px会导致部分 1200px 宽视口不命中 - 别试图用
!important替代媒体查询——它解决不了小屏错乱问题 - 如果还想支持更大屏（如 2K），再追加一条：
@media (min-width: 1920px) { .container { max-width: 1600px; } }
@media (max-width: 575.98px) 修复小屏文字排版
Bootstrap 4 的 .h1–.h6 类在 xs 下是固定值，没有响应式降级。你写 .h2 { font-size: 1.1rem } 全局规则，会被其内部 @media (min-width: 576px) 规则覆盖，小屏下完全不触发。
唯一能真正锁住 xs 的写法是：
@media (max-width: 575.98px) {
.h2 {
font-size: 1.1rem;
}
}
- 这个
575.98px是 Bootstrap 4 官方断点定义，不可四舍五入 - 不要用
em或%做字号单位，它们依赖父元素，容易在嵌套中失真 - 如果同时改多个标题，建议统一用
rem，并确保根字号（:root）未被其他框架覆盖
纯 CSS 环境下无法新增 .col-xxl-6 类
你在 CSS 里写 @media (min-width: 1400px) { .col-xxl-6 { flex: 0 0 50%; } }，页面上依然找不到 .col-xxl-6 这个类——因为它根本没生成。Bootstrap 的栅格类全部由 Sass 编译产出，不读取手写媒体查询。
想让新类名生效，只有两条路：
- 用 Sass 项目：重定义
$grid-breakpoints和$container-max-widths，然后@import "bootstrap/scss/bootstrap" - 不用 Sass：放弃
.col-xxl-6这种写法，改用现有类组合，例如d-none d-xxl-block col-xl-6（前提是 xxl 已启用）或直接内联style="flex: 0 0 50%"
最易被忽略的一点：即使你成功加了 @media (min-width: 1920px)，如果没同步调整 .container 宽度，内容仍会被窄容器框住，左右大片留白——断点和容器宽度必须成对修改。
