col-md-6 生效需满足三个前提：父容器为.row、必须包含xs基础类（如col-6）、未被更高断点类覆盖；bootstrap栅格按断点升序逐级覆盖，且{breakpoint}须为官方值（sm/md/lg/xl/xxl），{n}只能是1–12整数。
col-{breakpoint}-{n} 类怎么写才生效
直接写 col-md-6 就能让列在 ≥768px 时占 6 格，但必须满足三个前提：父容器是 .row、没漏掉 xs 断点基础类（如 col-6）、没被更高断点的类意外覆盖。Bootstrap 的栅格类不是“独立开关”，而是按断点升序逐级覆盖——col-6 col-md-4 意味着手机占半宽、中屏起变成三等分。
-
col-{breakpoint}-{n}中的{breakpoint}必须是官方断点：sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px）；xs不写前缀，即col-6 -
{n}只能是 1–12 的整数，col-5这种不存在——12 不能被 5 整除，框架不生成该类 - 漏写基础断点类（比如只写
col-md-6）会导致 xs/sm 下列退化为普通块元素，宽度由内容撑开，不是你预期的“半宽”
为什么写了 col-md-6 却没占满一半
最常踩的坑不是类名拼错，而是结构或覆盖逻辑出问题。开发者工具里查 width 或 flex 值，往往发现它根本没被 Bootstrap 的 CSS 规则命中。
- 父容器缺失
.row：col类依赖.row的display: flex和负 margin 补偿机制，直接放在.container下会失效 - 同级列总和 ≠12：两个
col-md-8并列 → 8+8=16＞12，第二列自动换行，看起来像“变窄”了 - 混用
col（无数字）和col-6：前者是等分剩余空间，后者是固定 50% 宽度，行为冲突导致布局错乱 - CSS 覆盖：自定义样式里写了
width: auto或flex: none，直接干掉栅格计算
多断点下如何精确控制每段宽度
想小屏并排、中屏堆叠、大屏再并排，靠的是“先设窄屏，再逐级覆盖”。Bootstrap 不提供“仅在 md”这种区间类，所有 col-{bp}-{n} 都是“≥该断点起生效”，要中断就得显式重置更高断点。
- 小屏 2 列、中屏 1 列、大屏又 2 列：
col-6 col-md-12 col-lg-6 - 想“只在 lg（992–1199px）占 4 格”，就得写
col-md-6 col-lg-4 col-xl-6，让 xl 及以上回退 - 别指望
col-lg-4在 xl 下还保持 4 格——它会一直生效，除非你加col-xl-3显式覆盖 - 调试时拖动响应式工具宽度，停在刚好 992px 和 1200px 两个临界点，确认行为是否符合预期
col-6 在手机上为啥不是一半宽
col-6 确实表示“xs 断点下占 6/12”，但它只管 xs 层级。如果没写 col-sm-6，sm 及以上断点就完全没定义，浏览器按默认块级行为渲染，列宽由内容决定，不是百分比。
- 手机上看勉强像一半，往往是因为文字折行或图片缩放造成的错觉，实际
width是auto - 真正全设备占半宽，得写全：
col-6 col-sm-6 col-md-6 col-lg-6，或更简练的col-6 col-sm-6（sm 生效后自动继承到更大断点） - 用
row-cols-2也可以实现全断点两列均分，但它作用于.row，不是单个.col，适用场景不同 - 别用
col-md-6单独写——xs/sm 下不可控，尤其在 iOS Safari 里容易触发横向滚动
