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;
}

我updated your js.fiddle here。

Answer 2

它将使您的页面水平滚动。您可以将auto find_last_nth(const std::string& haystack, const std::string& needle, size_t n = 1) { assert(0 != n); auto found_last = haystack.length(); while (true) { found_last = haystack.find_last_of(needle, found_last - 1); if (0 == --n || std::string::npos == found_last) { return found_last; } } }添加到.col-10 .mx-auto中，而不会产生任何副作用。始终记住检查纯CSS对引导模块的影响。

旋转木马外面的Bootstrap Carousel控件

2 个答案: