加了 .row 触发横向滚动条的根本原因是其默认 margin-left/right: -15px 未被父容器 padding 抵消，导致负边距溢出视口边界。
为什么加了 .row 就触发横向滚动条
根本原因是 .row 默认带 margin-left: -15px 和 margin-right: -15px，它本该被 .container 或 .container-fluid 的左右 padding: 15px 抵消。一旦你把它直接写在 下、塞进 display: flex 父容器里，或嵌套在没设宽的 .col 中，负边距就变成“溢出源”，把整个布局顶出视口边界。
用 DevTools 查 .row 的盒模型：如果它的 left/right 边界明显超出视口宽度，基本就是它导致的溢出。
- 临时删掉
.row类，滚动条消失 → 可锁定问题来源 - 别只看 HTML 结构是否“看起来对”，重点检查 computed styles 中
margin是否生效且未被抵消 - 移动端尤其敏感：几像素溢出就足以触发水平滚动
.row 嵌套在 .col 里为什么还溢出
Bootstrap 允许在 .col 内直接嵌套 .row，但前提是外层 .col 本身处于有宽度约束的上下文中（比如被 .container 包裹）。否则，内层 .row 的负边距会突破父级边界，连带撑宽整个 。
常见于：<div class="col-lg-8"><div class="row">...</div></div>，而这个 .col-lg-8 外层既没 max-width，也没 overflow-hidden。
- 给嵌套入口（即上层
.col）加overflow-hidden（Bootstrap 5 内置）最稳妥，等价于overflow: hidden - 或显式加
max-width: 100%，防止内容撑宽后连带.row跑偏 - 避免只对
.row自己设overflow—— 它是 flex 容器，加了也无效，还可能干扰布局
.table-responsive 和 .row 混用时滚动失效
把 <div class="row"> 直接放进 <code><div class="table-responsive"> 是高危操作。因为 <code>.row 的负边距会在 .table-responsive 这个 display: block 容器内直接溢出，触发父容器横向滚动，跟表格内容完全无关。
更隐蔽的问题是：.table-responsive 依赖父容器为 block 布局、无 overflow: hidden 等限制。若它的直接父元素是 display: flex、display: grid，或设置了 overflow: hidden，滚动行为就会静默失效。
- DevTools 里能看到
.table-responsive的样式存在，但实际不可用 → 逐级向上检查父元素的computed styles - 重点看是否有
overflow-x: hidden、flex-shrink: 0缺失、或width被意外压缩 - 临时给父容器加
overflow-x: visible !important测试是否恢复 —— 若恢复，问题就在这里
为什么桌面端加了 .table-responsive 也没滚动条
因为 .table-responsive 是媒体查询驱动的：Bootstrap 4/5 默认只在 max-width: 767.98px（sm 断点以下）启用 overflow-x: auto。桌面端样式表里压根没定义该规则，查 DevTools 就会发现它是个空壳。
这不是 bug，是设计如此。如果你需要所有尺寸都可横向滚动，得绕过这个限制：
- 直接给表格父容器加内联样式：
<div style="overflow-x: auto;"><table class="table"></table></div> - 或写一条覆盖规则：
.table-responsive-always { overflow-x: auto; }，然后替换 class - 切记：不要对
<table> 本身设 <code>overflow—— 无效；必须作用于块级父容器真正容易被忽略的是：
.row不是“安全容器”，它和.col的负边距 / 内边距是一对契约关系，任何打破这个链条的操作（比如删掉.row、多套一层.container、用自定义 flex 包裹.col），都会让整行栅格失去视觉一致性，且溢出问题往往在小屏下才暴露。
