使用Bootstrap可以使iframe响应吗？

我被困在HTML设计师说你的iFrame无法使用Bootstrap进行响应的情况下，但经过研究后，我想出了以下链接，它表示iFrame可以做出响应：link1和link2。使用Bootstrap可以使iframe响应吗？

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); 
     } 
});

JSFiddle

来源

2014-09-01 Dev

什么是你的问题？ – Teemu 2014-09-01 05:12:55

使用Bootstrap可以使iframe响应吗？ – Dev 2014-09-01 05:14:00

使用CSS可以使iframe成为父级的100％。 Bootstrap是CSS。 – Christina 2014-09-01 05:14:45

是的，你可以使用自举！

<!-- 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

来源

2014-09-01 05:17:15

感谢名单杰克，如果我有2个I帧和两个IFRAME SRC是动态设置的，所以会iframe的响应呢？基本上，iframe中的内容将是一种静态的形式，所以它仍然会有反应？ – Dev 2014-09-01 05:32:50

任何东西都可以在iframe中加载，这将提供响应 – 2014-09-01 05:37:09

唯一的条件是I帧的设计应该像上面根据您的要求 – 2014-09-01 05:38:54

在这个例子中我有嵌入在缩放的浏览器窗口响应是否被水平或垂直地调整大小的iframe YouTube视频。 You can see it in action here (link)。我敢肯定，你很可能改变这种以满足您的需求：

function resizeHeroVideo() { 
    var content = $('#hero'); 
    var contentH = viewportSize.getHeight(); 
    contentH -= 158; 
    if ($(".navbar-fixed-top")[0]) { 
     contentH -= 30; 
    } 
    content.css('height',contentH); 

    if(player != null) { 
     var iframe = $('.videoWrapper iframe'); 
     var iframeH = contentH - 150; 
     if (isMobile) { 
      iframeH = 163; 
     } 
     iframe.css('height',iframeH); 
     var iframeW = iframeH/9 * 16; 
     iframe.css('width',iframeW); 
    } 
}

该页面的完整代码也就是上gist。

来源

2014-09-01 05:34:29 davidcondrey

使用Bootstrap可以使iframe响应吗？

回答

相关问题