css - Bootstrap 轮播控件在轮播之外

Question

我试图将我的 Bootstrap Carousel 控件推到图像之外，但我似乎遇到了一些问题。我已经能够通过在 .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;
}

我updated your js.fiddle here .