bootstrap栅格列总和超12仍显示但变形，因不校验总和而强制压缩；col-auto与col混用时，前者占满内容宽致后者换行；flex-nowrap无法压缩不可折行内容；断点需显式声明，缺container容器亦会导致布局错乱。
为什么 col- 类加起来超过 12 还能显示但内容被挤变形
Bootstrap 的栅格系统默认按“一行最多 12 列”做弹性分配，但col- 类本身不校验总和。如果一排写了 col-6 col-6 col-6（总和 18），Bootstrap 不报错，而是把每列按比例压缩——比如三列强行塞进一行，每列宽度变成约 33.33%，但内容撑开后就溢出或换行错乱。
常见表现：文字折行、图标错位、按钮变窄、右侧内容被截断。
- 检查所有
row内的col-类，用浏览器开发者工具看实际渲染宽度是否接近 100% - 确认有没有遗漏
row容器（没包在row里会导致负 margin 失效，列宽计算错乱） - 注意响应式类叠加，比如
col-12 col-md-6 col-lg-4在不同屏幕下行为不同，别只看桌面端
col-auto 和 col 混用时为什么右边列直接掉到下一行
col-auto 是内容自适应宽度，col（无数字后缀）是等分剩余空间。两者混用时，Bootstrap 先按 col-auto 占据真实内容宽度，再把剩下空间均分给 col。如果 col-auto 内容太宽（比如长文本、未限制宽度的图片），剩余空间不足，col 就会被挤到下一行。
- 对
col-auto内的文本加text-truncate或设max-width - 图片统一加
img-fluid防止撑破容器 - 避免在
col-auto里嵌套未设宽的 flex 容器或表格
用了 flex-nowrap 但列还是换行了
flex-nowrap 只阻止 flex 子项换行，但它不能改变子项自身的最小宽度（min-width: auto）。当列内内容（如长单词、URL、未折行的英文段落）无法压缩时，整列仍会突破父容器，触发浏览器强制换行或横向滚动。
- 给
row加overflow-x-auto并配合white-space: nowrap控制文本 - 对可能超长的内容加
text-truncate或word-break: break-all - 慎用
flex-nowrap+col组合——col默认设了flex: 1 1 0%，和nowrap冲突，建议显式写flex: 0 0 auto替代
移动端正常、桌面端显示不全，是不是媒体查询写反了
不是写反，是漏掉了关键断点。Bootstrap 5 的 col-sm-* 表示“≥576px 生效”，col-md-* 是“≥768px”。如果你只写了 col-sm-6，那在 ≥576px 屏幕上就固定占 6 列，到了桌面端也不会自动调整——它不会“升级”成 col-md-4，除非你显式声明。
- 逐级覆盖：用
col-12 col-sm-6 col-md-4 col-lg-3明确每个断点的行为 - 别依赖“默认值”，Bootstrap 不会自动优化列数，必须手动指定
- 检查是否误用了
col-xl却忘了col-lg，导致大屏回退到col-md的布局
最常被忽略的是：栅格失效往往不是 class 写错了，而是父级容器没加 container 或 container-fluid，导致 row 的负 margin 被外层撑开，列宽计算基准偏移。先查这一层，比调 col 数字更省时间。
