html - 具有多个元素的 Bootstrap 轮播和同一页面上的默认轮播

Question

我在页面上的特定轮播中应用 CSS 时遇到问题。

当我尝试在 .carousel-inner .prev/.next 中仅将 CSS 应用于第二个旋转木马时，它无法正常工作。如果我删除 #secondCarousel(在 CSS 选择器处)，它会起作用，但会在第一个轮播中导致不良行为。

我的意思的例子可以在下面的链接中看到。

Carousel default working | Carousel with multiple items working

有人对如何解决它有任何建议吗？

Answer 1

您还需要为 #firstCarousel 提供 CSS，因为当您将它分配给 #secondCarousel 时，您会从中获取 CSS。要么这样做:

#secondCarousel .carousel-inner .active.left { left: -33%; }
#secondCarousel .carousel-inner .next        { left:  33%; }
#secondCarousel .carousel-inner .prev        { left: -33%; }
#firstCarousel .carousel-inner .next        { left:  33%; }
#firstCarousel .carousel-inner .prev        { left: -33%; }

或者留下一个像这样的通用 CSS:

.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }