bootstrap 表格在手机上撑破屏幕是因为未正确使用 .table-responsive 包裹，且常被嵌套在 flex/grid 容器中导致 overflow 失效；需单独包裹、禁用固定宽、添加 -webkit-overflow-scrolling 和 overscroll-behavior-x 优化滚动，并用 text-truncate、small 等控制内容弹性。
为什么直接用 Bootstrap 表格在手机上会撑破屏幕
Bootstrap 的 .table 默认是响应式设计，但它的“响应式”仅指添加 .table-responsive 后让表格整体变成一个横向滚动容器——前提是内容宽度超出父容器。而价格表通常包含多列（如基础版、专业版、企业版），列数一多，即使每列设了 col-12，td 内容仍可能因字体、内边距、最小宽度等被浏览器强制撑开，导致整个表格宽度远超 viewport，又没触发横向滚动（因为没包裹或 overflow 未生效）。
常见错误是只加 .table 或 .table-bordered，却漏掉包裹容器和明确的 overflow 控制。
必须用 .table-responsive 包裹，且不能嵌套在 flex 或 grid 容器里
.table-responsive 是一个带 overflow-x: auto 的 div，它依赖父容器有明确宽度（通常是 100%），并需要自身不被弹性布局截断。如果把 .table-responsive 放在 col-md-8 这类 flex 子项里，某些版本 Bootstrap（尤其是 v5.3+）的 min-width: 0 会破坏其滚动能力。
实操建议：
- 价格表外层直接用
<div class="table-responsive">，不要让它成为 <code>.row或.d-flex的直系子元素 - 内部表格用
<table class="table table-bordered mb-0">，<code>mb-0防止默认下边距干扰滚动区域高度 - 避免给
table或th/td设固定width或min-width，尤其别用px值；改用flex-basis或百分比（如style="width: 25%"）
手机端横向滚动体验差？加这三行 CSS 修复
原生 .table-responsive 在 iOS Safari 和部分安卓浏览器中，横向滚动卡顿、无法滑动到底、甚至触发页面回弹。根本原因是 touch 行为未显式启用，且滚动容器缺少硬件加速。
在 或自定义样式中加入：
.table-responsive {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overscroll-behavior-x: contain;
}
说明：
-
-webkit-overflow-scrolling: touch激活 iOS 平滑滚动（v5.3+ 已不强制需要，但保留更稳） -
overscroll-behavior-x: contain阻止横向滚动到底时触发页面左右拖拽（即“橡皮筋”效果） - 别给
.table-responsive设height或max-height，否则可能截断内容或隐藏滚动条
内容太宽？用 text-truncate 和 small 控制单元格文本
价格表里常见「每月 ¥299」、「免费试用 14 天」这类文案，在小屏下哪怕换行也容易撑宽列。Bootstrap 提供现成工具类，比写 media query 更快。
推荐写法：
- 价格数字用
<span class="h5 mb-0">¥299</span>，避免h3等大标题类标签自带 margin - 描述性文字统一加
text-truncate，并包裹在<div class="small"> 里，确保字号小、行高紧凑 <li>图标用 <code><i class="bi bi-check text-success"></i>（Bootstrap Icons），别用 PNG，否则缩放失真还占空间 - 删掉所有
<br>换行，改用flex-column或d-grid布局控制堆叠顺序（仅限手机）
手机端横向滚动不是“加个 class 就完事”，关键在于容器行为是否被父级 layout 截断、touch 交互是否被浏览器限制、以及单元格内容是否具备收缩弹性。最容易被忽略的是：把
.table-responsive 放进 .col 里后没测试真机滚动，结果上线才发现 iOS 上完全划不动。
