如何使Bootstrap 4傳送帶圖像響應？

Question

跳躍的標題和演示說明了一切。 Bootstrap 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。

您需要

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

添加到您的自定義CSS。

Answer 2

只需添加這種波紋管CSS，

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

我希望它會正常工作......