jquery - Bootstrap 4 轮播 Iframe 无排水沟

Question

我有一个两列布局，标题和 P 位于带有大量 Iframe 视频的 Bootstrap 轮播的左侧。我试图让 iframe 轮播适合其 block 的整个空间。我尝试添加无排水沟但找不到解决方案。我想知道这是否可行，因为 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>

Answer 1

1. 将 .no-gutters 应用于您的 .row。
2. 删除 .container-fluid 包装器。参见 documentation (粗体“需要边到边设计？”)
3. 删除所有 p{side}-{size} 和 m{side}-{size} 类。他们使用 !important 应用 margin 和 padding。你真的不想要那个。

结果:

/* 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>