Bootstrap旋转木马控制旋转木马之外

Question

我试图将我的Bootstrap旋转木马控件推到图像之外，但我似乎遇到了一些问题。通过在.carousel-controls上设置width: 0%;，我已经能够将它们从图像中取出，但问题在于它没有完全响应，并且与右侧控件相比，左侧控件看起来更接近图像。

什么是做到这一点的正确方法是什么？我感觉自己走错了路。

#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/

Answer 1

这是你在找什么？如果是这样，它只是在你的CSS只是一些快速变化：

#myCarousel { 
    margin-left: 50px; 
    margin-right: 50px; 
} 

.carousel-control.left { 
    margin-left: -25px; 
} 

.carousel-control.right { 
    margin-right: -25px; 
} 

I updated your js.fiddle here。