Bootstrap本身不提供数字滚动计数器功能，需结合countUp.js等轻量JS库实现动画；其CSS类仅支持静态布局，无法处理数值变更或缓动动画。
Bootstrap 本身不提供原生的数字滚动计数器（countUp 或 animateNumber 类功能），直接用它的 CSS 类（如 .col-md-4、.text-center）只能做静态响应式布局，无法实现“从 0 滚动到目标值”的动画效果。要做出真正可用的响应式计数器，必须组合使用 Bootstrap 的栅格与工具类 + 第三方轻量 JS 库。
为什么不能只靠 Bootstrap 的 col- 类实现数字滚动
Bootstrap 的响应式能力集中在布局断点（xs/sm/md/lg）、间距（mt-3）、文本对齐（text-lg-right）等视觉层，它不处理 DOM 数值变更或 requestAnimationFrame 动画逻辑。你写 <div class="col-12 col-md-6">12345</div>，这个数字永远是静态的——除非你手动触发 JS 修改 textContent 并加过渡，但纯 CSS 无法对数字做缓动动画。
- 试图用
transition: all 0.3s作用于数字容器，对数字字符串无效（CSS 不会插值 "100" → "200"） -
counter-reset/counter-increment是 CSS 计数器，仅用于伪元素编号（如列表序号），不能绑定动态数据或滚动 - Bootstrap 5 的
data-bs-*属性（如data-bs-toggle="tooltip"）也不支持计数器行为
推荐组合：Bootstrap 栅格 + countUp.js（v2.7+）
countUp.js 是目前最轻量（~3KB gzip）、无依赖、支持 IntersectionObserver 自动触发的数字滚动库，和 Bootstrap 配合最自然。关键不是“替换 Bootstrap”，而是让它负责布局和基础样式，countUp.js 负责动效逻辑。
- 引入方式：用 CDN 加载
countUp.min.js，放在bootstrap.bundle.min.js之后 - HTML 结构保持 Bootstrap 响应式语义：
<div class="row"><div class="col-12 col-lg-3"><span class="counter-number">0</span></div></div> - 初始化时检查元素是否在视口内，避免一进页面就滚动（
startVal: 0, endVal: 8742, duration: 2.5） - 注意：不要给
.counter-number设font-size的响应式单位（如rem）后又在 JS 中重设style.fontSize，会导致计算冲突
移动端常见坑：IntersectionObserver 兼容性与字体缩放
iOS Safari 12.2+ 和 Android Chrome 74+ 原生支持 IntersectionObserver，但旧版本（如微信内置浏览器 X5 内核）可能 fallback 失败，导致计数器不触发。同时，用户开启系统「更大字体」或「粗体文本」时，countUp 默认不会适配缩放后的渲染尺寸，容易造成文字溢出或错位。
- 必须包裹一层
<div class="d-flex align-items-center justify-content-center h-100">，防止因父容器高度塌陷导致 IntersectionObserver 判定失败 - 禁用用户缩放干扰：在计数器容器上加
style="-webkit-text-size-adjust: none;"（仅 iOS Safari 生效） - 测试真机：模拟器里的「响应式模式」无法复现微信中 X5 内核的 Observer 行为，务必用真机扫码验证
- 如果项目需兼容 iOS 10–11，得手动降级用
getBoundingClientRect()+scroll事件监听，但会增加 CPU 占用
真正难的不是让数字动起来，而是让动的过程在各种设备、各种系统设置下都稳定触发且不闪跳。Bootstrap 解决了“怎么摆”，而数字滚动的可靠性，取决于你对 IntersectionObserver 生命周期、字体渲染机制和移动端 WebKit 特性的实际把控程度。
