Twitter bootstrap Bootstrap4：旋转传送带项目在旋转时飞离屏幕

我正在制作一个引导旋转木马，其中我希望每个旋转木马项目是两个并排的图像。旋转转盘旋转时，应显示不同的两个图像项

目前，旋转木马中有三个项目。旋转木马会出现并旋转，但在第一次旋转时，所有项目都会离开屏幕，不会返回

有人能帮我弄清楚为什么以及如何修复它吗

这是一个密码笔：

这是我的HTML：

<div class="container">
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-wrap="true">
    <div class="carousel-inner">

      <div class="carousel-item active">

        <div class="row">

          <div class="col-6">
            <img class="d-block w-100" src="https://scottlieber.files.wordpress.com/2018/04/statehouseblue.jpg" alt="First slide">
          </div>

          <div class="col-6">
            <img class="d-block w-100" src="https://scottlieber.files.wordpress.com/2018/04/statehouseblue.jpg" alt="First slide">
          </div>

        </div>

        <div class="carousel-item">

          <div class="row">

            <div class="col-6">
              <img class="d-block w-100" src="https://scottlieber.files.wordpress.com/2018/04/reallives.jpg" alt="First slide">
            </div>

            <div class="col-6">
              <img class="d-block w-100" src="https://scottlieber.files.wordpress.com/2018/04/reallives.jpg" alt="First slide">
            </div>

          </div>
        </div>

        <div class="carousel-item">

          <div class="row">

            <div class="col-6">
              <img class="d-block w-100" src="https://scottlieber.files.wordpress.com/2018/04/reallives.jpg" alt="First slide">
            </div>

            <div class="col-6">
              <img class="d-block w-100" src="https://scottlieber.files.wordpress.com/2018/04/reallives.jpg" alt="First slide">
            </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>
      <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>
  </div>

</div>

---

这将是一个可能的解决方案

<div class="container">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="row">
                <img class="col-6" src="https://scottlieber.files.wordpress.com/2018/04/statehouseblue.jpg" alt="First slide"></img>
                <img class="col-6" src="https://scottlieber.files.wordpress.com/2018/04/statehouseblue.jpg" alt="First slide"></img>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <img class="col-6" src="https://scottlieber.files.wordpress.com/2018/04/reallives.jpg" alt="First slide"></img>
                <img class="col-6" src="https://scottlieber.files.wordpress.com/2018/04/reallives.jpg" alt="First slide"></img>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <img class="col-6" src="https://scottlieber.files.wordpress.com/2018/04/statehouseblue.jpg" alt="First slide"></img>
                <img class="col-6" src="https://scottlieber.files.wordpress.com/2018/04/statehouseblue.jpg" alt="First slide"></img>
            </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>
</div>  

---

谢谢。这解决了飞离屏幕的问题，但现在我的图像被拉长了。现在正在努力修复那个部件。。。