旋转木马外面的Bootstrap Carousel控件

Question

我试图将我的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/

Answer 1

这是你想要的？如果是这样,它只是CSS中的一些快速更改:

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

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

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

我在这里更新了你的js.fiddle.