Bootstrap 4 个轮播图片没有响应

Question

看看这个： http://www.consultacultura.it/portale_comunale_della_cultura.asp?IDcomune=1

轮播图片不像其下方的图片那样响应迅速。他们有相同的 class img-fluid.

Answer 1

这是 Bootstrap 4 Alpha 6 中的已知问题...

https://github.com/twbs/bootstrap/issues/21611

作为解决方法，您可以使用..

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

http://www.codeply.com/go/0QUU06MiIL

Answer 2

对我来说，该解决方法对台式机和移动设备均无效。我稍微调整了建议的解决方法，使其 -orientation- 合理。

@media (orientation: portrait) { 
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block;
        width:100%;
        height:auto;
    }
}

@media (orientation: landscape) { 
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block;
        width:100%;
        height:96vh;
    }
}