Bootstrap 4つのカルーセルが応答しない画像

Question

これを見てください： http://www.consultacultura.it/portale_comunale_della_cultura.asp?IDcomune=1

カルーセル画像は、その下の画像のように応答しません。それらは同じクラス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

私にとって、その回避策はデスクトップとモバイルの両方で機能しませんでした。提案された回避策を少し調整して、方向性を理解できるようにしました。

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