REFERENCE LINK

Question

我遇到的情况是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);
      }
});

JSFiddle

Answer 1

是的，你可以使用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

Answer 2

在这个例子中，我有一个嵌入在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上。

可以使用Bootstrap使iframe响应吗？

2 个答案:

REFERENCE LINK