Bootstrap的col默认等宽需满足“同一行且总和为12”：必须嵌套在row中，子列数之和为12（如4个col-3），仅写col仅在≥576px生效，全尺寸等宽需指定断点（如col-4）；gap、justify-content等影响视觉均匀性，内容不可控时需配合min-width:0、h-100等修复。
col 类默认就是等宽，但得满足“同一行 + 总和为12”
bootstrap 的 col 本身不带宽度值，只有在和 row 配合、且子元素总列数加起来是 12 时，才会自动均分。很多人写 <div class="col"> 却发现没等宽，其实是漏了父容器或数量不对。
常见错误现象：col 元素堆成一列、宽度极小、或者撑满整行不留间隙。
- 必须包在
row里，否则col的 margin 负值失效，列会错位 - 一行内所有
col的数字加起来要是 12（比如 4 个col-3，或 3 个col-4） - 用
col（无后缀）表示“自动等分”，但前提是父row下只有它自己，或其它同级col也都是无后缀
响应式等宽列：用 col-{breakpoint} 控制不同屏幕下的行为
单纯写 col 只在 ≥576px（sm 断点）生效，小屏会堆叠。真要“各尺寸都等宽”，得明确指定断点类，比如 col-sm-4 表示从 sm 起三等分，而 col-4 是从超小屏（xs）就开始三等分。
使用场景：后台卡片列表、移动端也要保持网格结构的图库、表单字段横向对齐。
-
col-4：所有屏幕都三等分（0–∞），适合强一致性需求 -
col-md-3：≥768px 才四等分，小屏堆叠，更省垂直空间 - 混用时注意优先级：
col-6 col-lg-4表示 xs–md 是两列，lg+ 变三列
gap 和 justify-content 影响视觉等宽感，不是列本身的问题
列宽度算出来一样，但看起来“不等宽”，大概率是 gap 或对齐方式干扰了视觉判断。Bootstrap 5+ 默认给 row 加了 gap，而 gap 会占空间，导致内容区实际宽度不同。
性能 / 兼容性影响：移除 gap 不影响布局计算，但需手动处理间距；用 justify-content-center 会让列居中，若列数不能整除 12，留白位置不对称，显得“不匀”。
- 想彻底消除间隙干扰：给
row加g-0 - 要居中又等宽：确保列数能整除 12（如 2/3/4/6 列），再加
justify-content-center - 避免用
text-center或mx-auto在col上强行居中内容，会掩盖列宽差异
col-* 不是 flex-basis 的简单映射，别直接拿 CSS 宽度去比对
看到 col-4 就以为是 width: 33.333%？其实 Bootstrap 是用 flex: 0 0 auto + max-width 实现的，当内容超长或有 padding/margin 时，列可能收缩或溢出，表现不像纯百分比宽度。
容易踩的坑：在 col 里放 table、大图、或未设 word-break 的长文本，导致列被撑开，破坏等宽。
- 固定内容宽度：给
col内容器加min-width: 0防止 flex 项目不收缩 - 图片等比例：用
img-fluid，别只靠width: 100% - 调试时看 computed width，而不是看 class 名——
col-4在 1200px 宽度下可能是 395.33px，不是精确的 1/3
最常被忽略的是：等宽列的前提是内容可预测。一旦嵌入动态高度卡片、异步加载的图片、或 JS 插件生成的 DOM，就得额外用 h-100 或 align-items-stretch 拉齐，否则“等宽”只是起点，不是终点。
