3

我知道这已经被问过很多次了，但请继续阅读。

在bootstrap 3中，我试图让一个 iframe 来填写一个 div。

我已经在互联网上进行了广泛的搜索，并尝试了我遇到的每一件事，但都没有运气。

这是独家新闻：

  1. 我需要在一个狭窄的 div ID 中加载一个 html 页面。它不是跨域的；我可以控制两者。
  2. 我需要能够对 iframe 中的内容进行样式设置。我可以从“主”页面（即目标页面）执行此操作，还是需要在“传入页面”（即 iframe 内容 html）中执行此操作？
  3. iframe 必须灵活：高度和宽度（响应式设计的宽度）需要根据内容扩展。

我很绝望，想知道 Bootstrap3 是否覆盖了某些东西？

结合下面列出的长长的 css 和 js 解决方案列表，我尝试了大量的 css 更改。

这是我尝试过的一堆东西（不是全部）：-S

4

2 回答 2

4

一些选项：

1：尝试使 iframe 响应。iframe 不能自动扩展，所以你必须决定一个好的高度，或者使用 JavaScript。对于宽度，bootstrap 已经涵盖了大部分内容。您确实需要在 iframe 周围创建一个 div 来响应它。然后将 iframe 的宽度 css 设置为 100%。

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
             <h1>I'm the left column</h1>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <iframe style="width: 100%;" src="http://..." height="200px"></iframe>
        </div>
    </div>
</div>

演示

2：不要使用 iframe。如果它位于同一来源，请使用类似$.load的函数。

$('#targetlocation').load('/usually_in_an_iframe.html #main_element');

3：＃1的组合和适合您链接到的高度问题的框架

于 2013-08-17T15:03:08.710 回答
3

Bootstrap 3.2 发布了一个方便的响应式 iframe 类：

http://getbootstrap.com/components/#responsive-embed

IE：

<!-- 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>
于 2014-08-01T06:22:47.687 回答