时间戳

首页 > 解决方案 > 我使用 col 属性添加了两个相邻的视频，但在小屏幕中，它被堆叠而没有间距

html - 我使用 col 属性添加了两个相邻的视频，但在小屏幕中，它被堆叠而没有间距

问题描述

这些视频一个接一个地堆叠在一起，没有任何空间。使用小型设备时如何在它们之间创建间距

 <div class="row">
    <div class="col-xs-12 col-md-4 col-md-offset-2">
    <div class="embed-responsive embed-responsive-4by3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    </div>
    <div class="col-xs-12 col-md-4">
    <div class="embed-responsive embed-responsive-4by3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    </div>
    </div>

标签： htmlcsstwitter-bootstrap

解决方案

1）您可以将 .form-group 类（这将提供 1rem 的边距）添加到您的 div 和 col-xs-12 类，如：

<div class="row">
  <div class="col-xs-12 col-md-4 col-md-offset-2 form-group">
    <div class="embed-responsive embed-responsive-4by3">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 form-group">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

2）或者你可以添加一个引导间距实用程序类，如 .mb-2 类（添加底部边距）到你的 div 和 col-xs-12 类，如下所示：

<div class="row">
  <div class="col-xs-12 col-md-4 col-md-offset-2 mb-2">
    <div class="embed-responsive embed-responsive-4by3">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 mb-2">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

推荐阅读