在我当前的元素中,我想添加一个 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 窗口的大小):
我不想更改任何 Bootstrap CSS(例如删除填充),至于高度,这无所谓,可以放在 height: auto;
上。 .我怎样才能做到这一点?
最佳答案
这就是我调整你的风格的方式:
.fixed {
position: fixed;
top: 100px;
left: 0;
right: 0;
height: auto;
}
iframe {
padding: 0 15px;
}
我还在 embed-responsive
中添加了 container
类,因此两者可以具有相同的宽度。
关于html - Bootstrap 和固定 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36237732/