加 flex-nowrap 不起作用是因为未同时处理 gutter、列宽和溢出：必须设 g-0 清除间隙，用 col-auto 或固定 flex 宽度控制列尺寸，并根据需求选择 overflow-x-auto 滚动或 text-truncate 截断。
加 flex-nowrap 不起作用，不是类没加对，而是它只管“不折行”，不管“总宽超限”——小屏下强行横向排列必须同时处理 gutter、列宽、溢出三件事，缺一不可。
为什么 flex-nowrap 加了还是换行？
因为默认 .row 有 g-2（1rem 水平间隙），两个 .col-6 加上间隙就超过 100%，浏览器只能把第二列挤到下一行。这不是 bug，是 flex 布局的正常回退行为。
- 检查是否漏了
g-0或gx-0：必须显式清除水平间隙，否则子项总宽必然超标 - 确认
.row是直接父容器：如果套在.d-flex或自定义 wrapper 里，flex-nowrap可能被忽略或继承链覆盖 - 用开发者工具看每个
.col的 computedflex-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 计算逻辑冲突，宽度不一致
小屏横向排列后，内容溢出怎么办？
硬推 flex-nowrap 在 xs 下几乎必然触发横向溢出——这不是异常，是 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 平板等设备极易踩坑 - 横向滚动场景不用断点切换：滚动本身已是响应式解法，
overflow-x-auto在所有尺寸下都生效
真正麻烦的不是加哪个类，而是你得提前决定：内容超宽时，是让用户滑动，还是截断，还是缩放字体——这三者互斥，没法靠一个 class 全部兜住。
