在bootstrap中将大小设置为响应式iframe

时间:2014-12-09 17:24:04

标签: css twitter-bootstrap iframe

是否可以在bootstrap中将大小设置为inframe?

我像这样设置iframe:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

我尝试将最大高度设置为450像素:

.embed-responsive {
   max-height:450px;
}

这根本没有效果。你能给我一个提示,怎么能实现一个更小但仍然响应的iframe?

3 个答案:

答案 0 :(得分:14)

我遇到了同样的问题并通过在.embed-responsive div周围添加一行和col-sm-8(根据你想要的大小)来解决它。

<div class="row">
  <div class="col-sm-8">
    <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分:0)

在Bootstrap 4中,使用class='embed-responsive'代替class='embed-responsive-item'。它应该工作得更好。 Source

答案 2 :(得分:0)

您只需要添加应覆盖的列数即可。在这里,我定义为4列。 (注意:引导整个屏幕包含12个单元格。)

<div class="bs-example col-sm-4" data-example-id="responsive-embed-16by9-iframe-youtube">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
  </div>
</div>