<p>用 .col-lg-4 仅大屏三等分，小屏错位因 .col-4 强制 flex: 0 0 33.333% 且不收缩，遇 gap 或像素误差即换行；应改用 d-flex + calc(33.333% - gap) 或规范使用带断点的 col 类。</p>
直接用 .col-lg-4 能实现三等分，但仅在大屏下稳定；小屏错位、换行、内容拉伸等问题频发，根源不在类名写错，而在对栅格系统底层行为和 Flex 布局规则的理解偏差。
为什么三个 .col-4 在小屏下会掉行或不等宽
.col-4 编译后是 flex: 0 0 33.333333%，它锁死基础宽度且禁止收缩（flex-shrink: 0）。一旦父容器总宽不能被 3 整除（比如含 gap、border 或小数像素计算误差），剩余空间不足就会触发换行。
- 常见现象：第三列突然跳到下一行，尤其在
768px或576px断点附近 - 内容长度差异大会加剧错位——长文本项撑开后，其他两项无法压缩补偿
-
.col-4没有断点前缀时，在所有视口下都强制占 33.333%，无法响应式降级为两列或单列
用 d-flex + 手动 flex 计算实现真正可控等宽
绕过栅格类的硬编码比例，用 Flex 工具类+内联样式控制弹性行为，才能兼顾等宽、间隙、最小宽度和响应式降级。
- 父容器加
d-flex flex-wrap和gap-3（注意 IE 不支持gap） - 子项统一设
style="flex: 0 1 calc(33.333% - var(--bs-gap) * 2 / 3); min-width: 200px;"——减去 gap 分摊值，避免超 100% - 若需断点适配（如桌面三列 → 平板两列 → 手机单列），改用媒体查询覆盖
flex值，而非混用.col-4和.col-md-6（后者会完全覆盖前者）
用 .row + .col 的正确姿势（适合纯响应式栅格场景）
如果坚持用 Bootstrap 栅格，必须确保结构完整、断点明确、数值守恒。
- 所有三列必须严格嵌套在同一
<div class="row">内，不能提前闭合</div>导致某列脱离上下文 - 推荐写法：
<div class="col-lg-4 col-md-6 col-sm-12">——总和始终为 12，且每个断点下都显式声明行为 - 避免只写
.col-4：它无断点，xs下也强制三列，极易在手机上横向溢出或文字折行
真正难的不是“怎么写三列”，而是判断当前需求是否需要严格等宽（用 flex 计算）、是否要响应式断点切换（用带前缀的 col 类）、还是只需视觉近似（用 .col-4 + 宽容内容）。三者底层机制完全不同，混用必然出问题。
