Question

我使用下面的代码。

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Bpdpl4FjkjM?list=UU1H37OGfdt7JZzJJ4jS-bhA" frameborder="0" allowfullscreen></iframe>                               
</div>
<div class="embed-responsive embed-responsive-16by9 ">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/i6wVUyol7W4?list=UU1H37OGfdt7JZzJJ4jS-bhA" frameborder="0" allowfullscreen></iframe>                               
</div>

Answer 1

在div之间添加填充以模拟间隙可能是一个黑客，但为什么不使用Bootstrap提供的东西。它被称为抵消。但同样，您可以在custom.css中定义一个类（您不应该编辑核心样式表）文件并添加类似.gap的内容。但是，.col-md-offset- *对我来说大部分时间都可以完成这项工作，这让我可以精确地在div之间留下空隙。

至于垂直间距，遗憾的是，没有像Bootstrap 3中那样内置任何设置，所以你必须创建自己的自定义类才能做到这一点。我通常会做类似.top-buffer {margin-top：20px; }。这就是诀窍，显然，它不必是20px，它可以是你喜欢的任何东西。

Answer 2

我认为您使用的是Bootstrap 3，因此没有内置的实用程序类来添加垂直间距。您可以使用css添加空格：

.embed-responsive {
  margin-bottom: 20px;
}

或仅在嵌入视频块之间：

.embed-responsive + .embed-responsive {
  margin-top: 20px;
}

Answer 3

.embed-responsive{
  margin: 20px 0;
}

如何在我的网页中的YouTube视频之间创建空间？我正在使用bootstrap

3 个答案: