Bootstrap断点是“最小宽度触发条件”而非固定区间，如col-md-6表示≥768px生效并持续至更大屏幕，除非被更高断点同类名覆盖；默认断点为xs（
Bootstrap 的断点不是“固定像素值”，而是“最小宽度触发条件”——col-md-6 表示“从 md 断点起（≥768px）开始生效”，不是“仅在 768–991px 区间生效”。
Bootstrap 默认断点尺寸和触发逻辑
所有断点都是 min-width 媒体查询，意味着样式一旦匹配，会持续生效到更大屏幕，除非被更高断点的同类类名覆盖。例如：col-sm-12 col-md-6 在 ≥768px 时变成两列，并保持两列直到被 col-lg-4 这类更细粒度规则覆盖。
-
xs：无前缀或col-，对应max-width: 575.98px（即小于 576px） -
sm：≥576px，适用于多数手机横屏、小平板 -
md：≥768px，典型 iPad 竖屏起始点 -
lg：≥992px，轻薄本/小桌面屏常用分界 -
xl：≥1200px，主流桌面显示器起始 -
xxl：≥1400px（Bootstrap 5.3+ 新增，非所有项目默认启用）
为什么 col-sm-6 col-md-6 和 col-sm-6 col-lg-6 渲染效果可能一样？
因为 md 和 lg 都是“≥某值”，只要没在中间断点写冲突规则，col-md-6 就会一直延续到 xl。真正起作用的是“第一个匹配的类”，后续同名类（如 col-lg-6）只有在它声明的断点首次满足时才会覆盖前一个。
- 错误写法：
col-12 col-sm-6 col-md-6 col-lg-6→ 实际只用col-sm-6就够了，后面重复无效 - 正确意图写法：
col-12 col-sm-6 col-md-4→ 手机堆叠、小屏并三列、中屏并四列 - 注意：Bootstrap 不提供
max-width类（如col-md-only-6），要实现“仅在某区间生效”，得手写媒体查询或用工具类组合
响应式栅格的三大常见翻车点
很多布局错乱不是断点设错，而是对栅格行为理解偏差：
- 忽略“移动优先”原则：未写
col-或col-xs-（v4/v5 中已移除 xs 前缀），导致小屏下元素不占满、错位甚至溢出 - 混用 Flex 工具类与栅格：比如在
.row里加d-flex，可能破坏row自带的display: flex和负边距逻辑 - 嵌套
.row时没包.col：Bootstrap 要求.row必须直接子元素为.col*，否则负 margin 失效，列宽计算错乱
自定义断点或禁用某断点的实操路径
如果你的项目大量用不到 xl，或需要适配 1366px 笔记本为主，别硬扛默认值。Sass 版本可直接改变量；CSS 版需重编译或用 JS 动态注入。
- Sass 中修改
$grid-breakpoints：例如删掉xl键值对，或把lg改成960px - CSS 用户：用
@import引入定制版 Bootstrap CSS，或在插入覆盖媒体查询（如@media (min-width: 960px) { .col-lg-6 { flex: 0 0 50%; } }） - 注意：改断点后，所有依赖该断点的工具类（如
text-lg-center、d-lg-none）同步失效，需一并检查
真正难的不是记住 576/768/992 这些数字，而是意识到：Bootstrap 的断点是“样式生效起点”，不是“尺寸区间锁”。很多人调了半天发现手机还是两列，最后发现只是忘了写最基础的 col-12 —— 它不在任何断点前缀里，却决定小屏命运。
