css - Bootstrap 4 全宽旋转木马显示其他幻灯片

Question

我正在使用 Bootstrap 4 轮播并尝试使其全宽。乍一看，它看起来像全宽，但当你在大屏幕上看时，第一个 slider 之后的其余 slider 也会出现。只需尝试缩小窗口即可。

我该如何解决这个问题？

这是我的代码:

.first-slide {
  background: url("https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg");
}

.carousel-item {
  height: 800px;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <div class="container-fluid p-0">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active first-slide">
          <div class="row">
            <div class="col-md-6 offset-md-1">
              <h1>Title</h1>
              <p>Text goes here</p>
            </div>
            <div class="col-md-5"></div>
          </div>
        </div>
        <div class="carousel-item first-slide">
          <div class="row">
            <div class="col-md-6 offset-md-1">
              <h1>Title</h1>
              <p>Text goes here</p>
            </div>
            <div class="col-md-5"></div>
          </div>
        </div>
        <div class="carousel-item first-slide">
          <div class="row">
            <div class="col-md-6 offset-md-1">
              <h1>Title</h1>
              <p>Text goeshere</p>
            </div>
            <div class="col-md-5"></div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
    </div>

  </div>

Answer 1

您是否考虑过检查 Bootstrap 网站上的标记？

.carousel-item img {
  max-height: 100vh; 
  object-fit: cover;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Title</h5>
        <p>Text goes here</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Title</h5>
        <p>Text goes here</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Title</h5>
        <p>Text goes here</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>