我试图使标题位于右侧。但是,它只是在左侧对齐。
CSS:
#jumboCarousel {
margin-top: 70px;
min-height: 300px;
max-height: 600px;
min-width: 100%;
}
#jumboCarousel img {
min-height: 300px;
max-height: 600px;
min-width: 100%;
}
#jumboCarousel > .carousel-indicators > li {
border-radius: 0px;
min-width: 25px;
background-color: #9d9d9d;
border: 1px solid black;
margin-right: 10px;;
margin-left: 10px;;
}
#jumboCarousel > .carousel-indicators > .active {
background-color: orange;
}
#jumboCarousel .carousel-caption {
color: white;
xright: 58%;
text-align: center;
max-width: 300px;
right: 0;
top: 1px;
/*top: 50%; */
xtransform: translateY(-50%);
xbottom: initial;
background: rgba(0,0,0,0.5);
padding:10px;
height:100%;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
我的问题的代码笔是 https://codepen.io/mrsalami/pen/VdeGYK?editors=1100
最佳答案
只需将 left: auto;
添加到 #jumboCarousel .carousel-caption
#jumboCarousel .carousel-caption {
color: white;
text-align: center;
max-width: 300px;
right: 0;
top: 1px;
xtransform: translateY(-50%);
xbottom: initial;
background: rgba(0,0,0,0.5);
padding: 10px;
height: 100%;
left: auto; /*Added*/
}
关于html - 如何在右侧制作带有标题的 Bootstrap 轮播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50679360/