如何修复Bootstrap 4中的箭头和徽标滑块？

Question

我有一个网站，其中包含滑块

我已经使用了这个代码，问题是当我单击箭头/每当它滑动时，滑块在箭头下方通过。这不是我想要的，我希望幻灯片在不在它之下的箭头之前传递它。

.enligne-fa,
.carousel-control-prev,
.carousel-control-next {
  font-size: 80px;
  color: #f3ab2a !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<!-- Gallery starts here -->

<section class="clients-slider mb-5">
  <div class="container-fluid company-bg-gallery">
    <div class="row  mb-4">
      <div class="col-lg-8">
        <h2 class="slider-text text-white pt-5">Gallery</h2>
      </div>

    </div>
    <div class="row my-5">
      <div class="col-lg-12 my-5">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active mx-lg-5">
              <div class="container mx-lg-5">
                <div class="row mx-lg-5">
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                </div>
              </div>
            </div>
            <div class="carousel-item mx-lg-5">
              <div class="container mx-lg-5">
                <div class="row mx-lg-5">
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                </div>
              </div>
            </div>
            <div class="carousel-item mx-lg-5">
              <div class="container mx-lg-5">
                <div class="row mx-lg-5">
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                </div>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev text-primary" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="fas fa-caret-left enligne-fa" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next text-primary" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="fas fa-caret-right enligne-fa" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Gallery ends here -->

目前所有三张照片都是一次通过。我需要像codepen这样的东西，但是我的箭头和BS4。此外，所有幻灯片都应该在箭头之前通过，并且在移动设备上也应该看起

任何帮助将不胜感激！

Answer 1

您的滑块位于容器流体中，占据了屏幕的整个宽度。因此，滑块将占用动画中的整个​​宽度。我会尝试将滑块放在流体容器中的容器中。您的控件应位于流体容器中，而滑块应位于容器中。容器会将with设置为网格本身。

就像是

<div class="container-fluid">
   [ARROWS HERE]
   <div class="container">[SLIDER HERE]</div>
</div>

如果有帮助，请告诉我！