移动端优先是Bootstrap类名默认从xs断点生效的硬约束，如.col-6全局有效，.col-md-6仅≥768px生效；须先写基础类再叠加更大屏类，否则小屏塌陷。
移动端优先不是口号，是默认行为——所有 Bootstrap 默认样式（比如 .container、.col 类）在没加断点前就只对小屏生效，大屏适配必须显式声明。
为什么 @media (min-width: 576px) 是起点而不是终点
Bootstrap 的断点（sm、md、lg 等）全部基于 min-width 媒体查询，意味着：小屏样式是“基底”，大屏只是叠加增强。如果你写 col-6 col-md-4，那手机上占半宽、平板起才缩为 1/3 宽——反过来写 col-md-6 col-4 会直接失效，因为 col-4 不合法（Bootstrap 5 没有纯 col- 数字类）。
-
col-*类仅在 Bootstrap 4 中存在，且只在超小屏（xs）生效；Bootstrap 5 已移除，统一用col（等效于col-12）或带断点的类 - 断点值本身可被覆盖，但修改
$grid-breakpointsSass 变量后，所有依赖它的类（如col-md-6）会重新编译，不是简单改 CSS 就能绕过 - 不写断点的类（如
col或col-12）永远优先作用于最小屏幕，这是“移动优先”在类名层面的硬约束
container 的宽度逻辑怎么影响首屏渲染
.container 在无断点时是 width: 100%，到了 sm 断点才变成 max-width: 540px。这意味着：手机加载时不会预留左右空白，内容顶到视口边缘；而桌面端反而被限制在固定宽度内居中。这个设计直接减少小屏首屏滚动和横向溢出风险。
- 若手动给
.container加max-width: 100%，会破坏断点响应逻辑，导致平板和桌面也铺满全宽，失去内容呼吸感 - 想让某区块在所有尺寸都撑满，用
container-fluid，但它不带padding-left/right: 1rem，需自行补内边距 - 嵌套
container时，内层不会继承外层断点行为，每一层都独立按自身类名触发媒体查询
图片和文本流在小屏下为何常“挤成一团”
移动优先不只管栅格，还管内容流。比如 img 标签默认不响应式，p 和 h1 的 font-size 也没自动缩放——这些都需要额外干预，否则“移动优先”的布局骨架会被非响应式内容撑破。
立即学习“前端免费学习笔记（深入）”；
- 必须加
class="img-fluid"才能让图片随父容器缩放（本质是max-width: 100%; height: auto） - 标题大小需配合
viewport元标签（<meta name="viewport" content="width=device-width, initial-scale=1">），否则 iOS Safari 会强制放大文本 -
text-*类（如text-center）在小屏默认生效，加text-md-start才能在中屏以上左对齐——顺序反了就无效
真正卡住人的从来不是“怎么写响应式”，而是忘了移动优先是整套规则的前提：它决定了类名解析顺序、媒体查询触发时机、甚至字体和图片的默认行为。漏掉任意一环，都会让“适配”变成局部修补。
