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

【问题标题】：Bootstrap carousel item jumping when adding padding to carousel-inner向 carousel-inner 添加填充时引导轮播项目跳跃
【发布时间】：2017-11-30 10:49:55
【问题描述】：

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

Codepen can be found here

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

编辑： 向父 div 添加填充是不可能的（不会修复它），因为我在项目的内容中使用 box-shadow。它不会出现在overflow:hidden

提前谢谢你。

【问题讨论】：

标签： javascript jquery twitter-bootstrap css bootstrap-carousel

【解决方案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
}

【讨论】：

我已经编辑了帖子，请再看一遍。
我确定这是因为 .item 上的 left : 0; 或 left : 100%;
我尝试在左侧添加 +/- 20px，但不幸的是没有这样做。

【解决方案2】：

好吧，我不知道为什么会这样，但您可以将padding 添加到您的轮播 ID 并达到相同的效果。

#theCarousel{padding:20px;}

现在运行良好：https://codepen.io/Karadjordje/pen/bYQmBP

【讨论】：

我已经编辑了帖子，请再看一遍。

【解决方案3】：

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

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

【讨论】：

请考虑编辑您的答案以使其更有帮助。您应该添加一些示例代码，并解释为什么这种方法有效