Bootstrap 5嵌套.row触发横向滚动条的根本原因是内层.row的负边距（margin-left/right:-15px）脱离父容器宽度约束，突破viewport边界；解决关键是用overflow-hidden或max-width:100%为嵌套入口兜底。
bootstrap 5 栅格嵌套本身不会直接导致 x 轴滚动条，真正触发横向溢出的是父容器未约束宽度 + 子列内容撑开布局 —— 尤其在嵌套 .row 时，内层 .row 的负边距（margin-left: -15px; margin-right: -15px）若脱离了外层宽度限制，就会把整个布局“顶出去”。
为什么嵌套 .row 会意外触发水平滚动
Bootstrap 5 的 .row 默认带 margin-left: -15px; margin-right: -15px，目的是抵消子 .col 的 padding-left: 15px; padding-right: 15px，实现紧凑对齐。但当你把一个 .row 嵌套进另一个 .col 里，而这个 .col 又没被明确设宽或限制最大宽度时，内层 .row 的负边距就可能突破父级边界，导致 body 宽度 > viewport，浏览器被迫渲染 X 轴滚动条。
- 常见于：在
.col-lg-8内部直接放<div class="row">，且该 <code>.col外层没有max-width或overflow-x: hidden - 容易被忽略的点：
.row不是“安全容器”，它需要被包裹在有明确宽度上下文的元素中才能生效 - 移动端尤其明显：viewport 宽度小，几像素溢出就足以触发横向滚动
嵌套列时必须加的 CSS 保护层
不要只依赖 Bootstrap 类，给嵌套入口加一层宽度兜底是最稳妥的做法。比如你在 .col-sm-6 里要嵌套 .row，就在这个 .col-sm-6 上加 overflow-x: hidden 或 max-width: 100%：
<div class="col-sm-6 overflow-hidden">
<div class="row">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
</div>
-
overflow-hidden是 Bootstrap 5 内置类，等价于overflow: hidden，能直接剪裁掉负边距造成的溢出 - 如果用自定义类，注意不要只写
overflow-x: hidden—— 某些旧版 Safari 对单独声明x方向支持不稳定，overflow: hidden更可靠 - 避免在
.row自己身上加overflow：它不是块级滚动容器，加了也无效，还可能干扰 flex 行为
table-responsive 在嵌套栅格中失效的原因
当表格放在嵌套的 .col → .row → .col 结构里，.table-responsive 经常不工作，根本原因是它的 display: block 和 width: 100% 在 Flex 环境下被父级 .row 的 display: flex 覆盖，导致宽度计算失准。
- 解决方法：把
.table-responsive提前一层，包在最外层.col上，而不是包在<table> 外层 <li>或者显式重置宽度：<code>.table-responsive { width: 100%; min-width: 0; }（min-width: 0是关键，防止 flex item 最小宽度撑开容器） - 别用
.table-responsive-lg试图“覆盖桌面端”——它只在min-width: 992px生效，而问题往往出现在lg断点内，应改用.table-responsive-sm或手动加类
嵌套列真正的难点不在“怎么写”，而在“谁来负责收口”。Bootstrap 的栅格是开放设计，.row 的负边距必须由上层容器主动约束，否则溢出就是必然结果。很多人卡在 modal 或 card-body 里嵌套失败，其实只是忘了给那个最内层的 .col 加一道 overflow-hidden —— 它不炫技，但管用。
