如何使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> 

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