只写.col-md-4会在中等屏幕错位，是因为该类仅在≥768px生效，未声明基础断点（如.col-12）导致xs/sm下宽度退化为内容自适应，小屏列宽忽大忽小、不均匀。
中等屏幕（md）错位，90% 是断点类缺失或 box-sizing 被覆盖，不是栅格本身有问题。
为什么只写 col-md-4 会在中等屏幕错位
Bootstrap 的断点类是“向上生效”，但仅限已声明的断点。只写 col-md-4 意味着：
– 小于 md（即 display: block，占满整行；
– 在 md 断点（≥768px）才按 4 列宽渲染；
– 但若父容器或兄弟元素写了 col-sm-6，而你没配对应断点，浏览器会按“最近有效断点”混算，导致列宽总和超 12 或换行异常。
常见表现：
– 同一行三个 col-md-4，在 900px 宽度下只显示两个，第三个掉到下一行；
– 开发者工具里看到该列计算宽度是 33.333%，但实际位置偏右或被截断。
- 必须补全基础断点：至少加上
col-12 col-sm-6 col-md-4，确保从最小屏起就有明确宽度 - 检查是否漏了
.row：col-md-4必须是.row的直接子元素，嵌套在<form></form>或自定义<div> 内会失效 <li>避免在同一个元素上只写高阶断点（如 <code>col-lg-3）却忽略md，尤其当设计稿以 992px 为基准时 - 全局修复：确保入口 CSS 顶部有
*, *:before, *:after { box-sizing: border-box; } - 不推荐对
.row或.col单独写box-sizing，它们已有 Bootstrap 内置规则，重复设置易冲突 - 重点排查表单控件（
<input>、<select></select>）、富文本容器、日期选择器等第三方 UI 组件 -
gx-md-*必须加在<div class="row"> 上，加在 <code>.col或外层.container无效 - 若需全断点统一间距，改用
g-2（同时设水平+垂直）或直接设--bs-gutter-x: 0.75rem到特定容器 - 不要用
px-3类模拟 gutter：它只加.col的 padding，不抵消.row的负 margin，结果是整行左偏 - 正确做法：把最后一行单独抽出来，用独立的
<div class="row justify-content-center"> 包裹 <li>更可靠的是换工具：Bootstrap 5.3+ 支持 <code>row-cols-md-3，它自动按每行 3 列切分，无需手写col-md-4，最后一行天然居中（配合justify-content-center） - 动态数据场景下，JS 计算行尾再插入空
col容易出错，优先用 CSS 方案
box-sizing: content-box 覆盖导致 col-md-* 宽度超限
Bootstrap 所有 col-md-* 类都依赖 box-sizing: border-box 计算宽度——padding 和 border 不计入总宽。一旦某层父容器（比如 .card、<input> 或第三方组件）被设为 content-box，它的 padding 就会「额外加」到列宽上，例如 col-md-4 理论宽 33.333%，实际变成 33.333% + 1rem，三列加起来超 100%，强制换行。
验证方式：
– 用开发者工具选中错位的 col-md-4 元素；
– 查看 Computed 面板里的 box-sizing 值；
– 若不是 border-box，往上逐层检查父元素样式来源。
响应式列间距（gx-md-*）与 col-md-* 断点不匹配
gx-md-3 这类 gutter 工具类只在 ≥768px 生效，但它作用的是整个 .row。如果该 .row 内部混用了 col-sm-6 和 col-md-4，而 gx-md-3 又只在 md 断点启用，小屏下 gutter 为默认值（1rem），大屏下突然变大（1.5rem），可能让列内容被挤出视口或右侧留白突兀。
最后一行 col-md-4 不居中？别硬塞 justify-content-center
用 col-md-4 排 5 张卡片，最后一行只剩一个，直接给 .row 加 justify-content-center 会让所有行都居中，破坏网格节奏；加 text-center 对容器则无效，因为 .col 是 flex 项目，不是 inline 元素。
真正容易被忽略的是：错位往往不是单一原因，而是 col-md-4 缺少基础断点 + 父容器 box-sizing 被改 + gx-md-* 在断点切换时放大了偏差，三者叠加才让问题在中等屏幕集中爆发。调试时得一层层剥开，不能只盯一个 class。
