jquery - Bootstrap 4轮播Iframe无沟槽

我有一个两列的布局，标题和P在引导旋转木马的左边，有很多Iframe视频。我正试图让iframe旋转木马适合它的整个空间块。我试过不加排水沟，但找不到解决办法。我想知道这是否可能，因为Iframe已经设置了16by9的尺寸。

 <div class="container-fluid p-5 back-test text-light testimonials">
<div class="row justify-content-lg-between text-center">
  <div class="col-lg-5 col-md-12 align-self-center ml-lg-4 pr-2 pb-sm-3">
    <h1>We're With <span class="you">You</span><br><span class="extra">We Go The Extra Mile</span></h1>
    <p>At Here are a few notable testimonials that we would like to share with you.</p>
  </div>
  <div class="col-lg-6 col-md-12">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
          <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/-1IHHJmuc78" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
            </div>
            <div class="carousel-item">
                <div class="embed-responsive embed-responsive-16by9">
                   <iframe width="560" height="315" src="https://www.youtube.com/embed/-1IHHJmuc78" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
            </div>
            <div class="carousel-item">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/zTiSxfCarPM" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                     </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>

最佳答案

将.no-gutters应用于您的.row。
放下包装纸。参见documentation（粗体“需要边到边设计？”）
删除所有.container-fluid和p{side}-{size}类。它们与m{side}-{size}一起应用margins和paddings。你真的不想那样。
结果：

/* demo purposes */
body:not(#_) {background-color: #888;}
.row {background-color: white;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row justify-content-lg-between text-center no-gutters">
  <div class="col-lg-5 col-md-12 align-self-center">
    <h1>We're With <span class="you">You</span><br><span class="extra">We Go The Extra Mile</span></h1>
    <p>At Here are a few notable testimonials that we would like to share with you.</p>
  </div>
  <div class="col-lg-6 col-md-12">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
          <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/-1IHHJmuc78" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
            </div>
            <div class="carousel-item">
                <div class="embed-responsive embed-responsive-16by9">
                   <iframe width="560" height="315" src="https://www.youtube.com/embed/-1IHHJmuc78" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
            </div>
            <div class="carousel-item">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/zTiSxfCarPM" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                     </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>