白边源于.carousel-inner的overflow: hidden与.carousel-item定位/尺寸不匹配导致的渲染间隙；修复需设.carousel-item为position: absolute、宽高100%、transform: translateZ(0)，并确保图片width/height 100%、object-fit: cover、display: block。
为什么 Bootstrap 4 轮播滑动时会出现白边
白边不是图片没铺满，而是 .carousel-inner 的 overflow: hidden 和子项 .carousel-item 的定位/尺寸不匹配共同导致的渲染间隙。Bootstrap 4 默认用 left + transition 切换，当相邻 .carousel-item 在动画帧间未完全重叠（尤其在快速滑动或低帧率设备上），浏览器会短暂绘制背景色——也就是你看到的“白边”。
关键 CSS 修复：强制重叠 + 消除溢出干扰
不用改 JS，几行 CSS 就能压住白边：
-
.carousel-inner必须设overflow: hidden（默认已有，别误删） - 每个
.carousel-item加position: absolute; width: 100%; height: 100%，确保它填满父容器且不参与文档流 - 给
.carousel-item增加transform: translateZ(0)强制 GPU 加速，减少帧间错位 - 如果用了
background-image替代<img>，务必确认其background-size: cover且background-position: center
示例：
.carousel-inner {
overflow: hidden;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
}
移动端滑动白边更明显？检查 touch 事件和 viewport
真机上白边放大，往往是因为：
立即学习“前端免费学习笔记（深入）”；
-
viewport缺失或缩放被禁用，导致页面被强制缩放，.carousel-item实际宽度≠视口宽度 - 滑动过程中触发了
touchmove默认行为，造成轻微抖动，放大间隙视觉感 - 某些 Android WebView 对
left动画插值精度低，建议改用transform: translateX()
补救动作：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未被覆盖 - 加一行
.carousel { touch-action: pan-x; }，明确告诉浏览器只响应水平滑动 - 如需彻底替换动画逻辑，可覆盖 Bootstrap 4 的 transition：
.carousel-item.active, .carousel-item-next, .carousel-item-prev { transition: transform 0.6s ease-in-out; }再配合 JS 手动设置transform: translateX(-100%)等
别忽略图片自身留白问题
即使 CSS 修好了，如果 <img> 标签自带 display: inline 的底部空白，或者没设 height: 100%，也会在轮播区域底部漏出白边。
- 必须为轮播内图片加：
width: 100%; height: 100%; object-fit: cover; display: block; - 禁用任何外层
<div>包裹图片——.carousel-item内应只有<img>或<picture> - 避免混用
w-100和自定义高度控制，二者冲突会导致object-fit失效
最易被忽略的一点：Bootstrap 4 的 .carousel-item 默认没有 height: 100%，所以图片设了 height: 100% 也无效——必须先让父容器有明确高度（比如 .carousel-inner { height: 400px; }）。
