我正在尝试将Bootstrap Carousel控件推到图像之外,但似乎出现了一些问题。我已经能够通过设置来让他们出来的图像width: 0%;
上.carousel-controls
,但问题是它不能完全反应,似乎左侧的控制更接近比右侧控制图像。
正确的方法是什么?我觉得我走错了路。
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
这是一个JSFiddle:https ://jsfiddle.net/guhx5sjL/1/
这是你想要的?如果是这样,它只是CSS中的一些快速更改:
#myCarousel {
margin-left: 50px;
margin-right: 50px;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句