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

Dom*_*zer 11 css iframe twitter-bootstrap

是否可以在引导程序中将大小设置为帧中?

我像这样设置iframe:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>
Run Code Online (Sandbox Code Playgroud)

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

.embed-responsive {
   max-height:450px;
}
Run Code Online (Sandbox Code Playgroud)

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

Lxs*_*ske 15

我遇到了同样的问题并通过在.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>
Run Code Online (Sandbox Code Playgroud)

  • 是的,虽然它在我在这里提供的示例中有效.为了更加语义正确,你可以在col-sm-8关闭后添加一个<div class ="col-sm-4">.您可以查看shoelace.io以了解cols的行为方式. (2认同)