要让bootstrap flex元素真正单行显示，必须同时设置g-0（或gx-0）清除间隙、子项启用flex-shrink（如flex: 0 0 auto或移除flex-shrink: 0）并设min-width: 0、外层加overflow-x-auto或text-truncate+min-w-0+overflow-hidden处理溢出。
Bootstrap Flex元素不换行，不是加个flex-nowrap就完事——它只管“不折”，不管“总宽爆表”“间隙撑开”“子项锁死不缩”。真要让它稳稳单行，得同时动三处：gutter、子项收缩性、溢出行为。
为什么flex-nowrap加了还是换行？
常见错觉是“类加了=生效”，但实际失效往往因为：
- 默认
.row有g-2（1rem水平间隙），两个.col-6+ 间隙 > 100%，浏览器只能把第二个列挤到下一行 -
.row被套在.d-flex或自定义 wrapper 里，导致flex-nowrap未作用于真正的 Flex 容器 - 子项用了
.col-6这类百分比类，但没配g-0，间隙叠加后总宽超标 - 开发者工具里看
computed flex-basis仍是auto，说明列宽没被约束，Flex 还在按内容撑
必须配合g-0或gx-0清间隙
Bootstrap 的 gutter 是横向换行的隐形推手。不清理，flex-nowrap等于白加。
-
g-0：清除所有方向间隙（含上下），适合纯横向滚动场景 -
gx-0：只清水平间隙，保留垂直间距，更常用 - 别用
mx-n*手动负边距抵消——它破坏 Bootstrap 的响应式断点计算逻辑 - 如果用了
.row-cols-*，再加g-0才真正可控；否则列宽+间隙必然超限
子项必须能缩或宽度可控
Flex 子项默认min-width: auto，内容再长也不愿缩小——结果就是撑破容器，而不是“单行内压缩”。
- 对短文本/图标用
.col-auto，但需确保内容不会意外拉长（如未截断的 token） - 对不可控内容（如 ID、URL），直接写内联样式：
style="flex: 0 0 200px; min-width: 0;" - 删掉
flex-shrink: 0——它和min-width: 0冲突，会让子项彻底拒绝收缩 - 避免混用
.col-auto和固定flex宽度：两者计算逻辑不同，同一行会出现宽度不一致
溢出后怎么处理？滚动 or 截断？
强制单行后，小屏下几乎必然溢出。你得选一种明确策略，不能靠默认行为碰运气。
- 要滚动：外层加
overflow-x-auto，且父容器必须有明确宽度（如w-100），否则滚动条不出现 - 要截断：每个
.col加text-truncate+min-w-0+overflow-hidden，三者缺一不可 - 别用
.table-responsive包.row——它是为<table>设计的，对栅格无效，还可能引入多余 padding <li>响应式断点必须写全：<code>col-12 col-md-6 col-xl-3，漏掉某断点，小屏下会回退成块级布局，flex-nowrap直接失效
最常被忽略的是min-width: 0——它不是锦上添花，而是让flex-shrink和text-truncate生效的前提。没它，其他所有设置都在原地打转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
