javascript - 可以使用 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>

REFERENCE LINK