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。