直接删掉没被 .container 包裹的 .row 或补上父容器，这是90%横向滚动条的根源；因 .row 默认负外边距仅在 .container 内安全，裸放 body 或 flex 容器中会拖出视口。
直接删掉没被 .container 包裹的 .row，或者给它补上父容器——这是 90% 横向滚动条的根源。
为什么 .row 一加就出现横向滚动条
因为 .row 默认有 margin-left: -15px 和 margin-right: -15px，这是为抵消子元素 .col-* 的左右 padding 设计的。但它只在被 .container 或 .container-fluid 包裹时才安全。
- 常见错误：把
<div class="row">直接丢在<body>下，或塞进自定义display: flex容器里——负外边距拖出视口，浏览器强制渲染横向滚动条 - 验证方法：用 DevTools 查看该
.row的盒模型，确认左右边界是否超出视口；临时删掉.row类，滚动条消失 → 基本锁定问题源 - 别指望
overflow-x: hidden在父级硬压——如果父容器是flex或grid，.row的负外边距会直接穿透布局逻辑
.table-responsive 在小屏不生效？先查断点和父容器
.table-responsive 在 Bootstrap 4 中仅对 max-width: 576px（即 xs 断点）生效，且依赖外层是 display: block、无 overflow: hidden 干扰。
- 表格内容自己先折行了？那就撑不开，自然不触发滚动——得配合
text-nowrap或white-space: nowrap - 别给
<table>自己设overflow-x：无效。必须作用于外层<div class="table-responsive"> - 父容器用了
display: flex或overflow: hidden？.table-responsive就静默失效。DevTools 里能看到滚动条样式存在，但实际不可拖动 - 临时测试法：给父容器加
overflow-x: visible !important，若恢复滚动，问题就出在这里
嵌套 .row 后左右多出白边？加 mx-n2，不是 mx-n3
当 .row 套在 .col-* 里时，外层 .col 的 padding-left: 15px 没被内层 .row 的负外边距完全抵消——Bootstrap 4 需要额外吃掉这 15px，而默认没加。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<div class="col-8"><div class="row mx-n2">...</div></div>——mx-n2编译后就是margin-left: -15px，刚好匹配 - 别手写
margin: 0 -15px：类名才是语义化保障，且能响应式控制（比如mx-n2 mx-md-0） - 加了
mx-n2还偏移？检查box-sizing: border-box是否全局生效。漏掉html { box-sizing: border-box }或*::before, *::after { box-sizing: inherit }，负外边距计算就会失准 - 避免在
.col外再套一层自定义div并设padding——这会让需抵消的值变成 30px，mx-n2就不够用了
别碰 .row 的 margin，改间距用工具类
手动重置 .row 的 margin（比如 .row { margin: 0; }）会破坏栅格协同机制：它清掉了负外边距，但没动 .col 的 padding，结果整行向右偏移 15px，右侧内容被裁切。
- 想调列间距？用
gx-*工具类（如gx-0、gx-3），它会同步更新.row的负外边距和.col的内边距 -
gx-*只作用于.row元素，加在.col上完全无效 - 全局调整？别改 CSS 变量——Bootstrap 4 的负外边距值是 Sass 编译时静态生成的，
:root里的--bs-spacer不影响mx-n2等工具类 - 真要统一改，必须修改 Sass 源码中的
$grid-gutter-width并重新编译
最常被忽略的其实是结构前提：每层需要分列的 .col-* 内部，第一件事必须是插入一个 .row。这不是可选项，是 Bootstrap 栅格逻辑重启的锚点。
