可以使用Bootstrap使iframe响应吗？

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>

参考链接