Question

我正在使用Bootstrap作为网格。我在第一列添加iframe，但在浏览器调整大小时没有响应。我正在使用width:100%，但内容隐藏而不是调整大小。

请参阅demo

从here检索的iframe代码。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
<iframe frameborder="0"  scrolling="no" width="100%" height="700" src="https://www.fctables.com/england/premier-league/iframe/?type=table&lang_id=2&country=67&template=10&team=&timezone=Europe/Chisinau&time=24&po=1&ma=1&wi=0&dr=0&los=0&gf=0&ga=0&gd=1&pts=1&ng=0&form=0&width=240&height=700&font=Verdana&fs=11&lh=22&bg=FFFFFF&fc=333333&logo=1&tlink=0&ths=1&thb=1&thba=FFFFFF&thc=000000&bc=dddddd&hob=f5f5f5&hobc=ebe7e7&lc=333333&sh=1&hfb=1&hbc=3bafda&hfc=FFFFFF"></iframe><div style="text-align:center;"></div>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
  </div>
</div>

Answer 1

请将您的iframe代码附加到另一个div中，并使用bootstrap类＆＃39; embed-responsive embed-responsive-16by9＆＃39;

Answer 2

添加嵌入式响应嵌入式响应式16by9＆＃39;包含iframe的父级的类。并添加“嵌入式响应项”＆＃39;到你的iframe并从iframe中删除宽度。

试试这个：

<div class="container-fluid">
   <div class="row">
       <div class="col-sm-3 col-md-6 embed-responsive embed-responsive-16by9" style="background-color:yellow;">
           <iframe frameborder="0" class="embed-responsive-item"  scrolling="no" height="700" 
                 src="https://www.fctables.com/england/premier-league/iframe/?type=table&lang_id=2&country=67&template=10&team=&timezone=Europe/Chisinau&time=24&po=1&ma=1&wi=0&dr=0&los=0&gf=0&ga=0&gd=1&pts=1&ng=0&form=0&width=240&height=700&font=Verdana&fs=11&lh=22&bg=FFFFFF&fc=333333&logo=1&tlink=0&ths=1&thb=1&thba=FFFFFF&thc=000000&bc=dddddd&hob=f5f5f5&hobc=ebe7e7&lc=333333&sh=1&hfb=1&hbc=3bafda&hfc=FFFFFF"></iframe><div style="text-align:center;"></div>
       </div>
   <div class="col-sm-9 col-md-6" style="background-color:pink;">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
   </div>
 </div>
</div>

在引导网格中使iframe响应

2 个答案: