Question

我有两列布局，标题和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>

Answer 1

将.no-gutters应用于您的.row。
拖放.container-fluid包装器。参见documentation（粗体的“ 需要边缘到边缘的设计吗？”）
删除所有p{side}-{size}和m{side}-{size}类。它们将margin和padding与!important一起应用。你真的不想那样。

结果：

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

Bootstrap 4旋转木马iframe无排水槽

1 个答案: