根本原因是.row的margin-left: -15px和margin-right: -15px在未被.container或.container-fluid包裹时溢出视口，触发浏览器横向滚动条；必须确保.row始终嵌套于正确容器内，否则负边距直接拖出视口。
.row 的负边距是横向滚动条最常见源头，不是 bug，是设计使然；必须确保它被 .container 或 .container-fluid 包裹，否则 margin-left: -15px 和 margin-right: -15px 会直接拖出视口。
为什么加了 .row 就出现横向滚动条
Bootstrap 4 的 .row 默认带左右各 -15px 边距，目的是抵消 .container 的 padding。但它只在正确嵌套时安全：
- 直接放在
<body>下 → 负 margin 溢出视口，浏览器强制渲染横向滚动条 - 塞进
display: flex父容器里 → flex 会压缩.row，但负 margin 仍生效，导致内容右偏甚至截断 - 嵌套在未设
max-width: 100%的.col内 → 外层列宽失控，连带.row溢出 - 用 DevTools 查
.row的盒模型：如果 left/right 数值明显超出视口宽度（比如 width 是 375px，但 right 达到 405px），基本就是它
.table-responsive 在桌面端不滚动？先看断点是否匹配
Bootstrap 4 的 .table-responsive 只在 max-width: 576px（xs 断点）下启用 overflow-x: auto，桌面端该 class 几乎无样式——这不是失效，是故意不生效。
- 若需全尺寸滚动，改用
<div class="table-responsive-lg">（从 lg 断点起生效） - 或临时加内联样式：
<div class="table-responsive" style="overflow-x: auto;"> - 别把
class="table-responsive"加到<table>上——必须是<table>的**直接父<div>** - 检查
.table-responsive的直接父元素：若有overflow: hidden、display: flex且没设flex-shrink: 0，滚动会被静默截断
Flex 容器里内容撑破布局？min-width: 0 是关键
Bootstrap 4 的 d-flex 只设 display: flex，不处理溢出。长文本、图片或无空格字符串（如 base64）会让子项按 min-content 宽度抢占空间，哪怕你写了 overflow-x: auto，布局阶段就已撑开。
立即学习“前端免费学习笔记（深入）”；
- 给可能溢出的子元素加
min-width: 0（推荐），或width: 0（兼容性稍好） - 对容器本身加
overflow-x: auto，并补上-webkit-overflow-scrolling: touch（iOS Safari 必加） - 避免在 flex 容器里混用
white-space: nowrap——它和 flex 排列逻辑冲突，容易互相覆盖 - 别只靠
text-overflow: ellipsis，它不参与 flex 尺寸计算，得配合overflow: hidden+min-width: 0才有效
所有这些溢出问题，本质都是 CSS 流式行为与 Bootstrap 工具类的边界冲突；.row 不是“安全盒子”，.table-responsive 不是“万能滚动开关”，d-flex 更不是“自动裁剪容器”——它们都依赖你明确控制父级上下文和子项收缩行为。
