bootstrap的.col在小屏下“不换行”需同时禁用flex换行、控制列宽、处理溢出，缺一不可；仅加flex-nowrap无效，因默认gutter使总宽超100%，且需确保.row为直接父容器、列宽受控（如g-0+col-auto或flex: 0 0 + min-w-0）。
直接结论：Bootstrap 的 .col 在小屏下“不换行”不是默认行为，也不是靠加个类就能无代价实现的；它本质是禁用 flex 换行 + 控制列宽 + 处理溢出，三者缺一不可。
为什么加了 flex-nowrap 还是换行？
因为 .flex-nowrap 本身只作用于父容器（.row），但如果你没显式控制子列宽度，.col-6 这类类名仍按百分比计算（如 50%），两个 .col-6 加起来就是 100%，看似刚好——可一旦加上 Bootstrap 默认的 gutter（g-2 等），总宽就超 100%，浏览器只能把第二列挤到下一行，看起来像“没生效”。
- 检查是否漏写了
g-0或gx-0：默认间隙会让 flex 项目总宽超标 - 确认
.row确实是直接父容器：如果嵌套在.d-flex或其他自定义容器里，.flex-nowrap可能被忽略 - 用开发者工具看 computed
flex-basis：若显示为auto或极大值，说明列宽未受控
.col-auto 和固定 width 哪个更可靠？
.col-auto 让列宽由内容撑开，适合文字短、图标类内容；但遇到长 URL 或未截断文本，它会无限拉伸，直接撑爆容器。固定 width（如 style="flex: 0 0 120px"）更可控，但需手动算间距、响应式适配麻烦。
- 推荐组合：
<div class="row flex-nowrap g-0"> <div class="col-auto">A</div> <div class="col-auto">B</div> </div>—— 适用于标签云、状态徽章等短内容 - 若内容不可控（如日志 ID、token），改用
style="flex: 0 0 200px; min-width: 0;"，min-width: 0是关键，否则长单词会强制撑宽 - 避免混用：
.col-4和.col-auto同行会导致 flex 计算混乱，宽度不一致
小屏强制不换行的陷阱：滚动还是截断？
在 xs（≤575.98px）下硬推 flex-nowrap，大概率触发横向滚动条——但这不是 bug，是预期行为。问题在于你是否允许用户手动滑动，还是希望内容被视觉截断。
- 要滚动：外层加
overflow-x-auto，且确保父容器有明确 width（如w-100） - 要截断：给每个
.col加text-truncate+min-w-0+overflow-hidden，否则 ellipsis 不生效 - 别依赖
.table-responsive包裹栅格：它是为<table> 设计的，对 <code>.row无效，还可能引入额外 padding响应式降级必须写全断点链
想“小屏单列 → 中屏双列 → 大屏四列”，不能只写
col-md-6 col-xl-3。因为col-md-6在xs下无定义，会回退到浏览器默认（通常是块级占满），但此时若父容器又加了flex-nowrap，就会卡死成一行挤在一起。- 正确写法：
col-12 col-sm-6 col-lg-3——col-12锁死超小屏行为，col-sm-6从 576px 起生效 - 若真需要 xs 下不换行，得单独加断点类：
flex-nowrap flex-sm-wrap，即 xs 强制单行，sm+ 恢复自动换行 - 注意：
flex-xs-nowrap不存在，Bootstrap 没提供xs前缀的 flex 工具类，只能用flex-nowrap配合flex-sm-wrap实现
真正难的不是加哪个类，而是判断“这列内容在窄屏下到底该滚动、截断，还是换行”。选错方案，轻则布局崩坏，重则移动端完全不可用——尤其当后端返回的是动态长度字段时，CSS 很难兜底。
- 正确写法：
