ブートストラップ4カルーセル画像を反応性にするには？

Question

うまくいけば、タイトルとデモはすべてそれを言う。ブートストラップ4の新しいカルーセルは反応しません。画像はアスペクト比を超えています。

誰かがcssとhtmlの大きな調整をしないでこれを解決する方法を知っていますか？

.wrapper { 
 
    max-width:200px; 
 
    width:100%; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="wrapper"> 
 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="carousel-item active"> 
 
     <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide"> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

あなたはそのようなラッパーか何かを必要としません。 .active .carousel-itemのデフォルトのスタイルはdisplay：flexです。

あなたのカスタムCSSに

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

を追加する必要があります。

Answer 2

ちょうどこの怒鳴るのCSSを追加し、

<style> 
.wrapper { 
    max-width:200px; 
    width:100%; 
} 
.carousel-item-next, .carousel-item-prev, .carousel-item.active { 
    display: block !important; 
} 
</style> 

私は、ラッパーだけで、問題がより明確に行うためである