我陷入了 HTML 设计器说您的 iFrame 无法使用 Bootstrap 进行响应的情况,但经过研究后我想出了以下链接,其中说 iFrame 可以响应:link1和 link2 .
HTML:
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#dpa" data-toggle="tab">DPA</a></li>
<li><a href="#rn" data-toggle="tab">Antwon</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>test</p>
</div>
<div class="tab-pane" id="dpa" data-src="http://www.drugpolicy.org/">
<iframe src=""></iframe>
</div>
<div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="203" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/37138051">ANTWON ♦ HELICOPTER</a> from <a href="http://vimeo.com/tauszik">Brandon Tauszik</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
</div>
</div>
</div>
</div>
JS:
$('#myTabs').bind('show', function(e) {
paneID = $(e.target).attr('href');
src = $(paneID).attr('data-src');
// if the iframe hasn't already been loaded once
if($(paneID+" iframe").attr("src")=="")
{
$(paneID+" iframe").attr("src",src);
}
});
最佳答案
是的,你可以使用 Bootstrap !
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
REFERENCE LINK
关于javascript - 可以使用 Bootstrap 使 iframe 响应吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25599173/