引导程序的 iframe 响应问题

Question

我正在将iframe与Bootstrap一起使用，当它离开屏幕时，它在<768px中没有响应。

我的代码：

<div class="row">
    <div class="col-md-12">
        <div class="text-center">
            <iframe src="http://www.emanueleferonato.com/wp-content/uploads/2015/07/wheel/" width = "458" height = "488" frameborder = "0" scrolling = "no"></iframe>
        </div>
    </div>
</div>

Answer 1

在提供的代码中，您为<iframe>的height和width指定绝对值。 如果没有任何其他媒体查询来修改这些值，您将没有任何响应能力。

如果您使用的是 Bootstrap 4，则可以使用 embed-responsive 类，该类专门解决了您的问题。 对于 Bootstrap 3，您可能需要创建自己的类：

.responsive-iframe {
  width: 100%;
  height: 100%;
  min-height: 75vh; // Change this based on your own preferences
}

然后将其应用于您的<iframe>

<iframe src= "/path/" class="responsive-iframe" frameborder="0" scrolling="no"></iframe>

此时，嵌入将占用其父容器宽度的 100%，并且最小高度为视口高度的 75%。 我要指出的是，这个"75vh"只是为了允许最小的演示显示。 您可能需要针对特定项目调整此设置。

如果您正在考虑过渡到 Bootstrap 4，您可以在此处阅读有关其嵌入类的更多信息：

https://getbootstrap.com/docs/4.0/utilities/embed/

Answer 2

你的 iframe 上没有任何响应式样式。您当前正在分配静态高度和宽度样式。查看 Bootstrap 4 的文档，它有一个内置的 iframe 响应类，如下所示：

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

或者你可以创建自己的类：

.responsive {
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow-y: hidden;
  overflow-x: visible;
}

考虑分配样式"溢出-y：隐藏;overflow-x：可见"，以防iframe中的内容无法准确显示在您为其提供的空间中。