2017-02-22 29 views
5

Схватка в названии и демонстрации говорят все. Новая карусель Bootstrap 4 не реагирует. Изображения не соответствуют их соотношению сторон.Как сделать 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>

ответ

11

Вам не нужно обертку или что-то в этом роде. Установкой по умолчанию для .active. Carousel-item является отображение: flex.

Вам нужно будет добавить

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

к пользовательскому CSS.

+0

обертка только для делает проблему более ясной. Но спасибо, это помогает мне! :) – NiZa

0

Просто добавьте этот сильфон CSS,

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

я надеюсь, что это будет работать нормально ...