是否可以在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?
答案 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>