时间戳

首页 > 解决方案 > 在引导网格中使 iframe 响应

html - 在引导网格中使 iframe 响应

问题描述

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

查看演示

从此处检索的 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>

标签： htmlcsstwitter-bootstrapiframeresponsive-design

解决方案

请将您的 iframe 标签包含在另一个 div 中，引导类为“embed-responsive embed-responsive-16by9”

推荐阅读