Bootstrap Carousel 切换时页面跳动的根本原因是轮播容器高度塌陷与视口单位误用引发布局重排；需用 padding-top 实现等比高度锚点、避免 body{height:100vh}、确保图片 object-fit 覆盖及首次渲染完整性。
Bootstrap Carousel 切换时页面跳动，不是动画没配好，而是轮播容器高度塌陷 + 视口单位误用共同导致的布局重排。直接改 height 或硬设固定高只会让问题更隐蔽。
为什么.carousel-item切换会引发页面上跳/下跳
根本原因在于轮播图容器缺乏稳定高度锚点，每次切换新 .carousel-item 时，若其内容（如图片、文字块）加载异步或尺寸不一致，父级 .carousel 高度就会动态收缩或撑开，牵连整个文档流——上方标题、导航栏等静态元素随之“被挤”位移。
- 常见现象：移动端首屏轮播一动，正文突然上滑露出大片空白；或切换到长图时页面猛地向下沉
- 典型诱因：
.carousel或.carousel-inner没设最小高度，且子项未统一 aspect-ratio 或 padding-top 占位 - 和
transform动画无关，哪怕关掉所有 transition，只要高度变，跳动就存在
用 padding-top 实现响应式等比高度锚点
不依赖 JS 测量、不写死 px 值，靠 CSS intrinsic ratio 技术锁定容器最小高度，让内容无论是否加载完成都占住空间。
- 给
.carousel-inner设置position: relative和padding-top: 56.25%（16:9 比例），再把真实内容用绝对定位塞进去 - 每个
.carousel-item内部包一层<div class="carousel-content">，设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 图片必须加
object-fit: cover和width: 100%; height: 100%，否则拉伸或留白 - 如果要用不同比例（如 4:3），改
padding-top为75%；竖图（9:16）则用padding-top: 177.77%
避免 body{ height: 100vh } 这个隐形陷阱
很多项目在全局 CSS 里写了 body { height: 100vh }，本意是“全屏”，结果成了轮播跳动的放大器——当 .carousel 高度突增，body 被强制截断，浏览器触发滚动条并重排布局，所有相对定位元素都会偏移。
- 必须改为
min-height: 100vh，允许内容自然溢出 - 同时检查是否有
.container或.row被设了height: 100%，这种链式约束会把塌陷传导下去 - 如果用了 React/Vue 动态渲染轮播项，确保首次挂载时至少有一个
.carousel-item.active已含完整 DOM，别等 AJAX 回来才 append
最易被忽略的是：padding-top 锚点只保住了容器高度，但图片加载延迟仍会导致内部内容“闪入”。务必配合 loading="lazy" + decoding="async"，并在 .carousel-item 上加 overflow: hidden 防止过渡中内容溢出裁剪异常。
