<p>直接用 .col-4 会导致等宽失效，因其编译为 flex: 0 0 33.333333% 且禁止收缩，遇 gap/border 或非整除宽度时触发换行或错位；flex-fill 本质是 flex: 1 1 auto，按内容宽度分配剩余空间，内容长度差异大会导致视觉不等宽；真正可控的等宽方案需手动设置 flex: 0 1 calc(33.333% - gap/3) 并配合 min-width 和 gap。</p>
为什么直接用 .col-4 会导致等宽失效
很多人加三个 .col-4 本意是让三列等宽，结果发现：小屏下挤成一行、内容长的项被强制拉伸、最后一项掉到下一行——根本不是“等宽分配”，而是“强制占满”。这是因为 .col-4 编译后实际是 flex: 0 0 33.333333%，它锁死基础宽度且禁止收缩（flex-shrink: 0），一旦父容器宽度不能被 3 整除（比如 768px 宽度下 768 ÷ 3 = 256px，但实际计算含 gap 和 border），就会触发 flex 布局的剩余空间不足逻辑，导致换行或错位。
d-flex + flex-fill 的真实行为
flex-fill 看似是“等宽填充”的捷径，但它本质是 flex: 1 1 auto，即允许放大、允许缩小、基准按内容宽度。这意味着：如果三项内容长度差异大（比如一个空 div、一个长标题、一个带图卡片），它们不会均分空间，而是按内容撑开后，再把剩余空间平分。结果往往是“视觉不等宽”，尤其在窄屏下更明显。
- 仅适用于内容长度接近的场景
- 若某项内容超长，它会先占足自身宽度，再和其他项瓜分剩余空间
- 无法控制最小宽度，容易在小屏下压缩到文字折行甚至溢出
真正可控的等宽分配方案
要让 Flex 项目**严格等宽**且**响应式自适应**，必须绕过栅格类的硬编码比例，手动控制弹性行为：
- 父容器加
d-flex和flex-wrap（如需换行） - 子项统一设
flex: 0 1 calc(33.333% - var(--bs-gap) * 2 / 3)—— 这里减去 gap 分摊值，避免总宽超 100% - 配合
min-width防止过小，例如min-width: 200px - 用
gap替代 margin 控制间距（注意 IE 不支持）
示例结构：
<div class="d-flex flex-wrap gap-3"> <div class="flex-shrink-1" style="flex: 0 1 calc(33.333% - 1rem); min-width: 200px;">A</div> <div class="flex-shrink-1" style="flex: 0 1 calc(33.333% - 1rem); min-width: 200px;">B</div> <div class="flex-shrink-1" style="flex: 0 1 calc(33.333% - 1rem); min-width: 200px;">C</div> </div>
响应式断点下的等宽处理
纯 col-4 在所有断点下都强制三等分，但真实项目往往需要“桌面三列、平板两列、手机单列”。这时不能混用 col-4 和 col-md-6，因为前者无断点，后者会覆盖前者，造成小屏突然变两列的跳变。
- 推荐写法：
col-sm-6 col-lg-4—— sm 起两列，lg 起三列 - 确保父容器是
row，且三项为直接子元素，否则 Bootstrap 的 flex 计算失效 - 若内容高度不一致，加
align-items-start到row防止整行被拉高 - 图片记得加
img-fluid，否则可能撑破列宽
最易被忽略的是：gap 值参与 calc 计算时，必须与 gap-* 类单位一致（如 gap-3 对应 1rem），否则减多了会留白、减少了会换行。这个细节在调试时经常卡住一整个下午。
