根本原因是.row的默认负边距（margin-left: -15px / margin-right: -15px）在脱离.container或.container-fluid等宽度约束容器时直接溢出视口，常见于直接置于<body>、flex父容器或未设max-width的.col内；解决关键是确保.row始终被有明确宽度上下文的容器包裹，或在嵌套入口加overflow-hidden/max-width:100%兜底。
为什么加了 .row 就触发横向滚动条
根本原因是 .row 的默认负边距（margin-left: -15px / margin-right: -15px）在脱离容器约束时直接拖出视口。它本该被 .container 或 .container-fluid 的左右 padding: 15px 抵消，但一旦你把它直接丢进 <body>、display: flex 父容器，或嵌套在未设宽的 .col 里，负边距就变成“溢出源”。
常见错误场景：
- 在
<body>下直接写<div class="row"></div> -
<div class="col-8"><div class="row"></div></div>—— 外层.col-8没设max-width: 100%或overflow-hidden - 父容器用了
display: flex且没配flex-shrink: 0
用 DevTools 查 .row 的盒模型：如果它的 left/right 边界明显超出视口宽度，基本就是它干的。
嵌套 .row 时必须加的兜底样式
Bootstrap 的 .row 不是“安全容器”，它需要明确的宽度上下文。嵌套时最稳妥的做法，是在嵌套入口（即上层 .col）加一层宽度保护：
立即学习“前端免费学习笔记（深入）”；
- 给外层
.col加overflow-hidden类（Bootstrap 5 内置），等价于overflow: hidden，能直接剪裁负边距溢出 - 或显式加
max-width: 100%，防止内容撑宽后连带.row跑偏 - 避免只对
.row自己设overflow—— 它是 flex 容器，加了也无效，还可能干扰布局
示例结构：
<div class="col-sm-6 overflow-hidden">
<div class="row">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
</div>gx- 类加在哪才生效
gx-、gy-、g- 这些 gutter 工具类只作用于 .row 元素，加在 .col 上完全无效。原因在于 Bootstrap 5 是通过 CSS 自定义属性 --bs-gutter-x 驱动的，而该变量只在 .row 上被声明和继承。
- ✅ 正确：
<div class="row gx-4"><div class="col">...</div></div> - ❌ 无效：
<div class="col gx-4">...</div>—— DevTools 里查不到--bs-gutter-x，规则不匹配 - 响应式写法必须显式覆盖所有断点：
gx-0 gx-md-3 gx-lg-4，否则小屏仍走默认gx-2
如果用了 React-Bootstrap 的 <Row> 组件，确认它是否透传了 className 到原生 <div class="row">；自定义封装的栅格组件若没渲染 .row，加啥 gx- 都白搭。
全局横向滚动禁用 ≠ 局部滚动失效
很多人想“禁用横向滚动”，结果加了 html, body { overflow-x: hidden }，却发现 .table-responsive 也不动了 —— 这是因为局部滚动依赖的是容器自身的 overflow-x: auto，和全局设置不冲突，真正的问题往往出在父级限制上。
- 确保
html, body有height: 100%+overflow-x: hidden，否则部分安卓 WebView 会失效 - 检查
.table-responsive的直接父元素：不能是display: flex/display: grid，也不能有overflow: hidden或overflow: clip - 移动端尤其要加
-webkit-overflow-scrolling: touch，否则 iOS Safari 滚动卡顿、松手回弹
真正要防的是整个页面被撑宽，而不是藏起滚动条。手指一划就滑出去的页面，对键盘用户和屏幕阅读器都是障碍 —— 所以排查必须落到具体元素的盒模型和嵌套链上，不能只靠全局样式压。
