col-md-4 占其直接父容器（.row）宽度的33.33%，而非视口宽度；其断点为≥768px（bootstrap 4/5），非旧版的≥992px，且.row必须嵌套在.container或.container-fluid内才表现正常。
col-md-4 在 bootstrap 中不占“屏幕宽度”的固定比例，而是占其**直接父容器（即 .row）宽度的 33.33333333%（也就是 4/12）**，前提是该父容器本身宽度已由 .container 或 .container-fluid 约束好。
col-md-4 的宽度计算依据是父行，不是 viewport
很多人误以为 col-md-4 是“占屏幕宽的 1/3”，其实它只响应父级 .row 的宽度。而 .row 默认左右 margin 为 -15px，宽度继承自 .container（如中屏下 .container 最大宽为 720px），所以最终列宽是基于这个值算出的 33.33%。
-
.row必须是.container或.container-fluid的直接子元素，否则列宽可能溢出或错位 - 如果
.row外层没加容器类，它会撑满整个 viewport，此时col-md-4确实≈视口宽的 1/3，但这属于意外行为，不可依赖 - Bootstrap 5 中
col-md-4生效的断点是 ≥768px，不是 ≥992px（后者是col-lg-的起点）
不同版本里 md 断点阈值不一致，容易踩坑
Bootstrap 4 和 5 都把 md 定义为 ≥768px，但网上大量旧教程、面试题甚至部分 UI 库文档仍沿用 Bootstrap 3 的说法（称 md 是 ≥992px），导致调试时发现样式没生效却查不出原因。
- 检查你项目实际引入的是 Bootstrap 4 还是 5 —— 看
bootstrap.min.css文件头注释或 npm 包版本号 - 在 ≥768px 但 col-md-4 一定生效；
col-lg-4则不会 - 用浏览器开发者工具的“设备模拟”功能，手动设成 800×600，比靠感觉更可靠
写多个断点类时，高优先级断点会覆盖低优先级
比如同时写 class="col-12 col-md-4"，小屏（col-12（全宽），中屏起自动切到 col-md-4。但注意：这不是“叠加”，而是“覆盖”。col-md-4 不会因为写了 col-12 就变弱。
- 断点优先级从低到高：无前缀（
col-） col-sm- col-md- col-lg- col-xl- - 不要写
col-sm-6 col-md-4 col-sm-12这种重复前缀，后面同前缀的会覆盖前面的 - 如果想在所有尺寸都保持 1/3 宽，直接写
col-4即可（Bootstrap 5 支持，且无断点限制）
真正要注意的，是 .row 和 .container 的嵌套关系是否干净，以及你手头 Bootstrap 版本的断点定义是否和代码匹配——这两点出错，比调 width 百分比更容易让布局“看起来不对”。
