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>

---

您可以尝试将mt-4类添加到COL中，将其作为上页边距，或将mb-4类添加到COL中作为下页边距。像这样：

<div class="row">
    <div class="col-xs-12 col-md-4 col-md-offset-2 mt-4">
        <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 mt-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>

1）您可以使用col-xs-12类向两个div添加.form group类（这将使边距底部为1rem），如：

<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） 或者，您可以使用col-xs-12类将like.mb-2类（它添加了一个底部边距）添加到两个div中，如下所示：

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