col-md-4在≥768px时占父.row宽度的33.333%，即4/12，该比例为相对值，随父容器宽度变化而变化；若叠加col-lg-6，则≥992px时变为50%。
col-md-4 在 ≥768px 时到底占多少宽
它占 4/12 = 33.333% 的父 .row 宽度，前提是同一行里其他 col 的数字加起来没超 12。这个比例不是像素值，也不随屏幕变大而变——只和父容器宽度有关。如果写了 col-md-4 col-lg-6，那在 ≥992px 时就变成 6/12 = 50%，因为 col-lg-6 覆盖了前面的 col-md-4。
常见错误是以为 col-md-4 在中屏下“固定 33.333%”，其实它只是按栅格系统算出来的相对值：父容器缩小时它跟着缩，父容器撑开时它也跟着拉伸。没有显式写 col-sm-* 或 col-* 的话，小屏（
怎么让一列在 sm 断点起始终占 1/3 宽
不能只写 col-sm-4——它只保证 ≥576px 时占 4 列，但更大断点（md/lg）下如果没有对应类，就会回退到默认行为（比如堆叠或等宽），实际宽度可能失控。
-
col-sm-4 col-md-4 col-lg-4：最稳妥，每个断点都明确指定 -
col-sm-4：sm 及以上所有断点都继承该设置（Bootstrap 断点是“最小宽度”逻辑，sm 生效后 md/lg/xl 都沿用） -
row-cols-3：直接给.row加这个类，整行所有子列在 ≥576px 下自动均分，不用每列都写col-sm-4
别用 col-4 单独写——它只在 xs（
col-6 和 col-md-6 的区别到底在哪
col-6 是 “仅 xs 断点生效”，col-md-6 是 “≥768px 才开始生效”。两者不互斥，可以共存，但覆盖逻辑不同：
-
col-6 col-md-6：手机和中屏及以上都占半宽（xs 和 md+ 同步生效） -
col-6 col-lg-4：手机占半宽，≥992px 时变成 4/12 ≈ 33.333%，中间断点（sm/md）无定义 → 回退为块级、宽度不可控 -
col-md-6单独写：xs/sm 下无任何栅格约束，列会按内容宽度撑开，甚至溢出容器
检查是否生效，别靠眼睛看，打开 DevTools → Elements → 查看 computed styles 里的 width 值，再切不同视口宽度验证。
为什么写了 col-lg-3 却没占满 3 列宽度
最常被忽略的是父容器结构和数值总和：
- 必须嵌套在
.row内，且.row必须在.container或.container-fluid里——漏掉任意一层，flex 布局上下文丢失，col类失效 - 同一行内所有
col-{bp}-X的 X 值之和不能超过 12：col-lg-8 col-lg-5→ 8 + 5 = 13 → 第二列会被挤到下一行 - 写了
col-lg-3但没写其他列的 lg 类，它们会回退到更小断点或默认行为，导致总宽≠12，计算偏移错乱 - 自定义 CSS 里写了
width: 50%或flex: none，直接覆盖了 Bootstrap 的width: calc(...)
真正起作用的是「断点匹配 + 父容器完整 + 数值合规」三者同时满足。少一个，col-lg-3 就只是个没效果的 class 名字。
