bootstrap使用iframe 开启自适应

要在 Bootstrap 中使用 iframe 并实现自适应，你可以按照以下步骤进行操作：

1. 首先，将 iframe 元素嵌套在一个具有自适应特性的父容器中。可以使用 Bootstrap 的 Grid System 或者其他自适应布局组件来实现这一点。

2. 设置父容器的样式为 `position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;`。其中 `padding-bottom` 的值是根据你希望 iframe 的宽高比来设置的。例如，对于16:9的宽高比，可以将 `padding-bottom` 设置为 56.25%（9除以16乘以100）。

3. 在父容器内部创建一个绝对定位的 iframe 元素，并设置其样式为 `position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;`。这将使 iframe 元素填充整个父容器，并且不显示边框。

以下是一个示例代码：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="your-iframe-url"></iframe>
</div>

在上面的示例中，`embed-responsive` 类用于创建一个具有自适应特性的父容器，而 `embed-responsive-16by9` 类用于设置宽高比为16:9。你可以根据需要选择不同的宽高比类，如 `embed-responsive-1by1`（1:1），`embed-responsive-4by3`（4:3）等。

通过以上步骤，你可以在 Bootstrap 中使用 iframe 并实现自适应效果。希望对你有所帮助！