Question

我正在使用带有Bootstrap的iframe，并且它在＆lt; 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

在您提供的代码中，您指定了height的{{1}}和width的绝对值。如果没有任何其他媒体查询来修改这些值，您将不会有任何响应。

如果您使用的是Bootstrap 4，则可以使用<iframe>类，该类专门解决您的问题。对于Bootstrap 3，您可能想要创建自己的类：

embed-responsive

然后将其应用到您的.responsive-iframe { width: 100%; height: 100%; min-height: 75vh; // Change this based on your own preferences }

<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;
}

考虑分配样式也可能有用＆＃34; overflow-y：hidden; overflow-x：visible＆＃34;如果iframe中的内容无法准确显示在您提供的空间中。

ifst响应式问题与Bootstrap

2 个答案: