web-dev-qa-db-fra.com

Comment rendre les images du carrousel Bootstrap 4 réactives?

Heureusement, le titre et la démo disent tout. Le nouveau carrousel de Bootstrap 4 n’est pas réactif. Les images sont hors de leur format.

Est-ce que quelqu'un sait comment résoudre ceci sans faire de gros ajustements dans les CSS et 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>

csscarouseltwitter-bootstrap-4
7
NiZa

Vous n'avez pas besoin d'un wrapper ou quelque chose comme ça. Le style par défaut pour l’élément .active .carousel est display: flex.

Vous devrez ajouter

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

à votre css personnalisé.

13
Erik-Martijn Kasimier

Il suffit d'ajouter ce css ci-dessous,

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

j'espère que cela fonctionnera bien ...

1
Piyali