代码之家  ›  专栏  ›  技术社区  ›  Aswin

水平图像和嵌入视频之间的间隙

  •  0
  • Aswin  · 技术社区  · 8 年前

    图像和嵌入视频之间存在间隙。在移动视图中没有问题。

    <div class="section"> 
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6"><div class="embed-responsive embed-responsive-16by9"> 
    
            <img  class="embed-responsive-item" width="600px" height="360" src="images\phone.jpg"/>                                  </div>
          </div>
          <div class="col-sm-6">
            <div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" class="embed-responsive-item" src="https://www.youtube.com/embed/_k4SA"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    1 回复  |  直到 8 年前
        1
  •  1
  •   Sachin Sanchaniya    8 年前

    用col-sm-6添加类“nopadding”…这将解决您的问题。

    <div class="section"> 
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6 nopadding"><div class="embed-responsive embed-responsive-16by9"> 
    
            <img  class="embed-responsive-item" width="600px" height="360" src="images\lenovok5.jpg"/>                                  </div>
          </div>
          <div class="col-sm-6 nopadding">
            <div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" class="embed-responsive-item" src="https://www.youtube.com/embed/_9G7CGbk4SA"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    

    CSS文件添加以下代码:

    .nopadding {
       padding: 0 !important;
       margin: 0 !important;
    }