javascript - 向 carousel-inner 添加填充时引导轮播项目跳跃

Question

我已经尝试解决这个问题很长时间了，但没有运气。问题是滑块正在正常工作，除非我向.carousel-inner项目添加填充时正在跳跃并出现在背景中..

Codepen 可以在这里找到

我试过强制没有填充/边距等，但没有运气..

编辑：box-shadow由于我在项目的内容中使用，无法向父 div 添加填充（不会修复它） 。它没有出现overflow:hidden

先感谢您。

Answer 1

由于 Bootstrap 添加next和left类.item使其成为绝对位置，请参见此示例https://codepen.io/anon/pen/POxyJg

添加顶部：20px；顶部.carousel-inner>.next和.carousel-inner>.prev

.carousel-inner>.next, .carousel-inner>.prev{
  top: 20px; // top padding
}

Answer 2

尝试向 .carousel-inner 添加一个宽的透明边框而不是填充，这对我有用。在主题启动器的情况下，css 会像

.carousel-inner {border-top:20px solid transparent;}

Answer 3

好吧，我不确定为什么要这样做，但是您可以将轮播 ID 添加padding到您的轮播 ID 中并达到相同的效果。

#theCarousel{padding:20px;}

现在效果很好：https ://codepen.io/Karadjordje/pen/bYQmBP