col-{breakpoint}-{n} 类需显式声明各目标断点才生效；仅写 col-md-4 仅在 ≥768px 生效，lg/xl 下无定义则回退默认行为；应写为 col-md-4 col-lg-4 col-xl-4 或至少 col-md-4 col-lg-4。
col-{breakpoint}-{n} 类怎么写才真正生效
直接写 col-md-4 只在 ≥768px 时占 4/12 宽度，但不会自动继承到更大断点——漏掉 col-lg-* 或 col-xl-*，大屏下会回退到默认行为（比如堆成一列或宽度失控）。Bootstrap 的断点类是“最小宽度”逻辑，不是“覆盖所有更大尺寸”。
-
col-md-4：仅在 md 及以上生效，lg/xl 下若没额外声明，浏览器按普通块级元素渲染，宽度由内容撑开 - 要确保全尺寸一致，得显式写出所有目标断点：
col-md-4 col-lg-4 col-xl-4，或至少写col-md-4 col-lg-4（sm 及以下需另配） - 如果只写
col-4，它只作用于 xs 断点（
多个断点类混用时，谁起作用？
类名按断点从小到大顺序覆盖，后写的同类型类会覆盖前面的，但只在对应断点及以上激活。比如 col-6 col-md-4 col-lg-3：xs 下占半宽，≥768px 变为三等分，≥992px 再变为四等分。
- 漏掉基础
col-*类，xs 屏会退化为display: block，列垂直堆叠——这不是 bug，是移动优先设计的必然结果 - 写
col-sm-6 col-md-8而没写col-*，xs 下无定义，列宽不可控，可能溢出或挤压文字 - 不要依赖“自动继承”，Bootstrap 不会把
col-md-6的行为延续到 lg，除非你明确写col-lg-6
想让某列在特定断点下“临时变窄”，又不影响其他尺寸
关键不是删掉旧类，而是用更高断点类去覆盖。比如小屏并排、中屏单列、大屏再并排，就得靠断点叠加：
<div class="row"> <div class="col-6 col-md-12 col-lg-6">A</div> <div class="col-6 col-md-12 col-lg-6">B</div> </div>
-
col-6：≤575px 时左右各半 -
col-md-12：≥768px 时两者都全宽，垂直堆叠 -
col-lg-6：≥992px 时再次平分，恢复并排——这里col-lg-6覆盖了col-md-12的行为 - 顺序不重要，但断点必须严格匹配：不能用
col-lg-6 offset-md-2，因为offset-md-2在 lg 断点未定义，margin-left 为 0
为什么写了 col-md-3 却看起来不是 25% 宽？
常见原因不是类名写错，而是父容器或 CSS 干扰。栅格宽度是 flex 计算结果，任何破坏 flex-basis 或引入 flex-shrink: 0、width、min-width 的样式都会覆盖原始比例。
- 父元素没套
.row：.col必须嵌套在.row内，否则负 margin 补偿失效，gutter 错位 - 自定义样式写了
width: 200px或flex: none：直接压倒 Bootstrap 的flex: 0 0 25% - 用了
col（无数字）类：这是“自动适配内容宽度”，不是按比例分配，和col-md-3完全不同 - 检查开发者工具的 Computed Styles，看
flex-basis是否为25%；如果不是，说明有更高优先级样式在干预
col-md-4 却忘了 col-lg-4，结果在 1024×768 的 iPad 上列宽突然崩掉。别指望浏览器猜你要什么，每个断点都得亲手告诉它。
