Bootstrap v4/v5标准断点为：xs（无查询，默认）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px，v5新增），均为min-width语义，持续生效至更大屏幕；container宽度则按断点阶梯式设定版心尺寸，非简单等于断点值。
Bootstrap 的屏幕尺寸划分不是凭空定的，而是基于主流设备视口宽度统计和渐进式适配逻辑确定的。不同版本略有差异，但 v4/v5 的标准划分最常用、也最值得你记牢。
Bootstrap v4/v5 的断点定义（min-width）
这是你在写 @media 或用 col-sm-* 这类类名时真正起作用的临界值：
-
xs：无媒体查询，适用于所有屏幕（即默认行为），对应max-width: 575.98px -
sm：≥576px，典型手机横屏、小平板竖屏 -
md：≥768px，主流平板（iPad 竖屏起始）、小桌面 -
lg：≥992px，中等桌面显示器 -
xl：≥1200px，大桌面或宽屏笔记本 -
xxl（v5 新增）：≥1400px，超宽屏场景
注意：这些是 min-width 断点，不是区间。比如 col-md-6 在 ≥768px 时生效，并**持续生效**到更大屏幕，除非你显式覆盖（如加 col-lg-4）。
container 宽度如何随断点变化
容器宽度不等于断点值，而是设计团队权衡内容可读性与留白后定的“版心”尺寸：
-
xs（width: 100%，撑满视口 -
sm（≥576px）：width: 540px -
md（≥768px）：width: 720px -
lg（≥992px）：width: 960px -
xl（≥1200px）：width: 1140px -
xxl（≥1400px）：width: 1320px
这些值在 _variables.scss 中可修改，但直接改需同步调整栅格计算逻辑。多数项目只需理解它“为什么是这个数”——比如 720px 是为保证 12 列网格在 768px 屏上每列约 60px（含 gutter），文字阅读舒适。
为什么你写的 col-sm-6 在手机上没反应
常见错因不是代码写错，而是忽略了 Bootstrap 的“移动优先 + 向上覆盖”规则：
- 没写
xs类（如col-6或col-12），则sm及以上类在xs下完全不生效，默认堆叠占满整行 -
col-sm-6表示“从 sm 起才分两列”，xs下仍是col-12行为（即独占一行） - 想让手机也两列？必须显式写
col-6 col-sm-6，或只写col-6（v5+ 支持）
另外检查是否漏了 <div class="row"> 包裹 —— 没 <code>row，col 的负 margin 和 flex 布局就失效，表现会完全错乱。
自定义断点时最容易忽略的兼容点
如果你在 _custom.scss 里改了 $grid-breakpoints，务必同步处理：
-
$container-max-widths必须按比例更新，否则container宽度和栅格列宽不匹配 - 所有依赖断点的 mixin（如
make-col-ready）会自动重算，但手写的@media查询不会——旧媒体查询可能卡在错误宽度 - v4/v5 的
col-*-auto和col-*-*计算逻辑不同，改断点后建议跑一遍栅格 demo 验证列宽精度
断点本身只是 CSS 媒体查询触发器，真正决定布局的是类名组合 + 容器约束 + flex 行为。别只盯着像素数字，重点看「哪个类在哪个视口生效」以及「生效后容器给它多大空间」。
