加了 flex-nowrap 仍换行是因为 gutter 未清除或列宽失控；需显式设 g-0、确保 .row 为直接父容器，并用 col-auto 或固定 flex 宽度配合 min-width: 0 控制；横向排列须明确选择滚动或截断方案。
加了 flex-nowrap 还是换行？先查三件事
不是类没生效，而是它只管“不折行”，不管“总宽超限”。默认 .row 有 g-2（1rem 水平间隙），两个 .col-6 加间隙就超 100%，浏览器只能把第二列挤下去。
- 检查是否漏了
g-0或gx-0：必须显式移除 gutter，否则 flex 项目总宽必然超标 - 确认
.row是直接父容器：如果套在.d-flex或自定义 wrapper 里，flex-nowrap可能被继承链覆盖或忽略 - 用开发者工具看每个
.col的computed flex-basis：若显示auto或极大值，说明列宽没受控，.col-auto或flex: 0 0 XXpx才能锁定
.col-auto 和固定 flex 宽度怎么选
.col-auto 让内容撑开宽度，适合短文本、图标、徽章；但遇到长 URL、未截断日志 ID，它会无限拉伸，直接撑爆容器。固定 flex 更可控，但需手动适配断点。
- 短内容（如状态标签）：用
<div class="row flex-nowrap g-0"><div class="col-auto">A</div><div class="col-auto">B</div></div> - 不可控内容（如 token、ID）：改用
style="flex: 0 0 200px; min-width: 0;"，min-width: 0是关键，否则flex不收缩 - 别混用
.col-auto和固定 width：同一行里两者 flex 计算逻辑冲突，宽度不一致
小屏下横向排列的两种归宿：滚动 or 截断
硬推 flex-nowrap 在 xs 下几乎必然触发横向溢出——这不是 bug，是 flex 布局的正常表现。你得明确选一边：允许用户滑动，还是视觉上截断。
- 要滚动：外层加
overflow-x-auto，且确保父容器有明确宽度（如w-100），不然滚动条不出现 - 要截断：每个
.col加text-truncate+min-w-0+overflow-hidden，缺一不可；text-truncate在min-w-0缺失时无效 - 别用
.table-responsive包.row：它是为<table>设计的，对栅格无效，还可能引入多余 padding
响应式断点必须写全，否则小屏会卡死
想“xs 单列 → md 双列 → xl 四列”，不能只写 col-md-6 col-xl-3。因为 col-md-6 在 xs 下无定义，会回退到浏览器默认块级行为；此时若父容器又加了 flex-nowrap，所有列就被锁死在一行，挤成一条线。
- 正确写法：
col-12 col-md-6 col-xl-3，保证每个断点都有明确宽度控制 - 中间断点别跳：比如写了
col-sm-6 col-lg-3，但在 992px（md 断点）下会意外回退到单列，Surface 平板等设备极易踩坑 - 横向滚动场景不用断点切换：滚动本身已是响应式解法，
flex-nowrap+overflow-x-auto在所有尺寸下都有效
