Я имею вопрос, похожий на Bootstrap Carousel Caption moves after transition complete, но я до сих пор не решил, что чтение/попробовав решение ...Bootstrap Carousel CSS текст двигается по переходу к активному пункту
Текста (в .carousel титрах) всплывает сверху вниз во время перехода слайда в карусели. Моя цель - держать его у основания. Я изменил CSS на карусели, но в какой-то момент, должно быть, что-то испортил. Я еще не нашел его, и последнее место после этого поста - начать все заново! : D
Примечание: проблема возникает только при указанной выше ширине браузера 768 пикселей.
Вы можете посмотреть мою проблему здесь: http://wfsu.org/2016copy/education/ Я положил прозрачный фон на подпись., Чтобы легче было увидеть проблему. Но это также работает, если вы помещаете фон на .item.
Вот мои связанные карусельного изменения CSS для @media (мин-ширина: 768px)
.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*/
}
Спасибо