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