.col本身不支持overflow滚动，必须用有明确尺寸的块级容器包裹；横向滚动需内部加div设max-width+overflow-x-auto，纵向滚动需设max-height+overflow-y-auto。
col列本身不支持overflow滚动，必须用容器包裹
直接给.col加overflow-x: auto或overflow-y: auto基本无效——因为.col默认是flex子项（Bootstrap 5+）或float元素（v4），它没有独立高度/宽度约束，浏览器无法判断“溢出”边界。真正能滚动的，只能是**有明确尺寸的块级容器**。
正确做法是：在.col内部再套一层<div>，并给这层设<code>max-width（横向滚动）或max-height（纵向滚动）+ overflow类。
- 横向滚动常见于长文本、标签列表、代码片段等窄列中内容过宽场景
- 纵向滚动多见于动态加载列表、日志输出、时间轴等高度不可控内容
- 别试图靠
white-space: nowrap强制单行来“触发”横向滚动——那只会让容器撑破，而不是产生滚动条
横向滚动：用.table-responsive或手动包裹+overflow-x-auto
如果.col里放的是<table>，直接用 Bootstrap 内置的<code>.table-responsive最稳妥：<div class="col"><div class="table-responsive"><table class="table">...</table></div></div>。它会自动加overflow-x: auto并处理小屏适配。
如果不是表格，比如一排<span></span>标签或自定义卡片：
- 外层
.col保持原样（如col-md-8） - 内部加一层
<div class="d-flex overflow-x-auto pb-1">，并确保子元素不换行（如<code>flex-nowrap） - 子元素（如
.badge）加flex-shrink-0防止被压缩 - 避免对
.col本身设overflow——它可能被父.row的负边距干扰，导致滚动条错位 - 给
.col内部容器设响应式高度，例如：<div class="col"><div style="max-height: calc(100vh - 250px); overflow-y: auto;">...</div></div> - 如果
.col在.card里，优先让.card成为flex-column容器：class="card d-flex flex-column"，再给.card-body加flex-fill overflow-y-auto - 移动端 Safari 需额外加
-webkit-overflow-scrolling: touch才能有惯性滚动（可内联写：style="overflow-y: auto; -webkit-overflow-scrolling: touch;"） - 检查 DevTools 的 Computed 面板，确认该容器的
scrollHeight > clientHeight，否则滚动不会触发 - 上层
.col加overflow-hidden（Bootstrap 5 内置类），防止内层.row的负边距拖出视口 - 若该
.col本身内容可能超宽（比如含未约束的<pre class="brush:php;toolbar:false;"></pre>或<code>），加text-break或word-break: break-word，而不是依赖滚动 - 绝对不要给
.row自己加overflow——它是display: flex容器，overflow对其子项裁剪无效，还可能破坏栅格对齐
纵向滚动：必须设max-height，不能只靠overflow-y-auto
overflow-y: auto在.col里加了也白加，除非你同时控制它的高度。典型错误写法：<div class="col overflow-y-auto">...</div>——此时.col高度随内容撑开，永远不溢出。
实操要点：
嵌套时最容易漏掉的两个兜底点
当.col作为子容器出现在另一个.col或flex父项中时，溢出问题会叠加放大。两个必须加的保护项：
横向滚动的边界判定非常敏感，尤其在 iOS 小屏上，calc()里的像素偏差、字体缩放、甚至系统粗体开关都可能让原本刚好不溢出的内容突然触发滚动。上线前务必在真机上验证最小宽度断点。
