Question

我遇到类似Bootstrap Carousel Caption moves after transition complete的问题，但我仍然没有解决它阅读/尝试解决方案......

文本（在.carousel-caption中）在轮播中的幻灯片转换期间从顶部弹出。我的目标是让它靠近底部。我已经修改了旋转木马上的CSS但是在某些时候必须弄乱一些东西。我还没有找到它，这篇文章之后的最后一招就是重新开始！：d

注意：问题仅发生在浏览器宽度超过768像素的位置。

您可以在此处查看我的问题：http://wfsu.org/2016copy/education/ 我在.carousel-caption上添加了透明背景，因此更容易看到问题。但是如果你把背景放在.item上也可以。

以下是@media（min-width：768px）

的旋转木马相关CSS更改

.carousel-caption {
        position:absolute!important;
        top: inherit!important;
        background-color: rgba(0, 0, 0, 0.5);
        bottom:0;/*was 20px*/
        padding-top:0!important;/*was 20px*/
        padding-bottom:10px;/*was 30px*/
        padding-right:inherit!important;
        padding-left:inherit!important;
        right:0!important;/*was 20%*/
        left:0!important;/*was 20%*/
        background: inherit;
        border-bottom: 17px solid $accent-green;
    }

CSS更改为旋转木马低于768像素

/*carousel*/
.carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
}

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
    background:$primary-green;
    border-bottom: 17px solid $accent-green;
    padding-top:1px;
    padding-right:10px;
    padding-left:10px;
    top: 0;

}
.carousel-control.left, .carousel-control.right {
    background-image: none!important;
}
.carousel-indicators {
    bottom:-15px;/*was 20px*/
}

谢谢

Answer 1

我想通了......也许这将有助于将来的某些人。

在@media（.min-width：768px）的.carousel-caption样式上，我改变了顶部：inherit！important;顶部：自动！重要。似乎已经有效，但截至目前我还没有完全理解继承和自动值之间的区别。

Bootstrap Carousel CSS文本在转换为活动项

1 个答案: