html - Bootstrap 和固定 iframe

Question

在我当前的元素中，我想添加一个 iframe。更具体地说，我想在用户点击他或她将要查看的页面的某个区域(在 anchor 标记上)时显示一个 iframe，它应该以包含 CSS 属性 position: fixed; 的方式显示。 .在 Bootstrap 网站上查看并进行了一些搜索后，我找不到太多与此相关的内容。

任何人都可以向我解释如何制作响应式固定 <iframe> ？

我使用了 following代码:

.other-content {
  background-color: tomato;
  height: 1000px;
}
.fixed {
  position: fixed;
  top: 100px;
  height: 500px;
  width: 1080px;
}

<div class="container">
  <div class="other-content">
    Some other content goes in here
  </div>

  <div class="embed-responsive embed-responsive-16by9 fixed">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
  </div>
</div>

(Stackoverflow 上的结果可能与我在 Jsfiddle 上得到的结果不完全相似)

编辑:

经过一些摆弄，我的问题归结为以下几点:我想要一个子元素的宽度 position: fixed CSS 属性始终与 Bootstrap 容器元素具有完全相同的宽度，以便它始终位于容器内。这就是我的代码现在的样子(尝试调整结果 fiddle 窗口的大小):

Jsfiddle

我不想更改任何 Bootstrap CSS(例如删除填充)，至于高度，这无所谓，可以放在 height: auto; 上。 .我怎样才能做到这一点？

Answer 1

这就是我调整你的风格的方式:

.fixed {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  height: auto;
}

iframe {
  padding: 0 15px;
}

我还在 embed-responsive 中添加了 container 类，因此两者可以具有相同的宽度。