Css 转盘外部的引导转盘控件

我试图将我的引导转盘控件推到图像之外，但我似乎遇到了一些问题。我已经能够通过设置

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:

这就是您要找的吗？如果是这样的话，这只是CSS中的一些快速更改：

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

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

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

---

I.

它将使您的页面水平滚动。您最好将

.col-10.mx auto

添加到

.carousel inner

。始终记得检查引导模块上附加的纯css的副作用