添加填充到旋转木马内部时，Bootstrap轮播项目跳跃

Question

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

Codepen can be found here

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

编辑：我不能在父div中添加填充（不会修复它），因为我在项目内容中使用了box-shadow。它不会出现在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

嗯，我不确定为什么会这样做，但您可以将padding添加到您的轮播ID并达到同样的效果。

#theCarousel{padding:20px;}

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

Answer 3

尝试为.carousel-inner添加一个宽的透明边框而不是填充，这对我有用。 对于主题入门者而言，css就像

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