Html 引导和固定iframe

在我当前的项目中，我想添加一个iframe。更具体地说，每当用户单击他或她将要查看的页面的某个区域（在锚定标记上）时，我想显示一个iframe，它应该以一种包含CSS属性

position:fixed。在浏览了Bootstrap网站并进行了一些搜索之后，我找不到太多关于这方面的信息

谁能解释一下如何制作一个响应性的固定

我使用了代码：


。其他内容{
背景色：番茄；
高度：1000px；
}
.固定{
位置：固定；
顶部：100px；
高度：500px；
宽度：1080px；
}

这里还有其他一些内容
我就是这样调整你的风格的：

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

iframe {
  padding: 0 15px;
}

我还将class
container
添加到
embed responsive
中，以便两者具有相同的宽度。
我就是这样调整您的样式的：

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

iframe {
  padding: 0 15px;
}

我还将class
容器
添加到
嵌入响应
中，这样两者的宽度就可以相同。
只需添加这个CSS规则

iframe.embed-responsive-item{
 width:100%;
 height:100%;
}

还有对现有CSS的更改

 .fixed {
  position: fixed;
  top: 100px;
  height: 500px;
  /* width:100%; */ /* remove the width*/
  left:8px;
  right:8px;
}



。其他内容{
背景色：番茄；
高度：1000px；
}
.固定{
位置：固定；
顶部：100px；
高度：500px；
左：8px；
右：8px；
}
iframe.embed-responsive-item{
宽度：100%；
身高：100%；
边界：无；
}

这里还有其他一些内容
只需添加此CSS规则即可

iframe.embed-responsive-item{
 width:100%;
 height:100%;
}

还有对现有CSS的更改

 .fixed {
  position: fixed;
  top: 100px;
  height: 500px;
  /* width:100%; */ /* remove the width*/
  left:8px;
  right:8px;
}



。其他内容{
背景色：番茄；
高度：1000px；
}
.固定{
位置：固定；
顶部：100px；
高度：500px；
左：8px；
右：8px；
}
iframe.embed-responsive-item{
宽度：100%；
身高：100%；
边界：无；
}

这里还有其他一些内容
如果内部
div
是固定的，则无法获取的容器宽度。您可以使用JavaScript实现它

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

  <div class="fixed">
  <iframe width="100%" height="315" src="https://www.youtube.com/embed/zpOULjyy-n8" frameborder="0" allowfullscreen></iframe>
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
    </iframe>
    foo
  </div>
</div>

JS:

.
如果内部
div
是固定的，则无法获取的容器宽度。您可以使用JavaScript实现它

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

  <div class="fixed">
  <iframe width="100%" height="315" src="https://www.youtube.com/embed/zpOULjyy-n8" frameborder="0" allowfullscreen></iframe>
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
    </iframe>
    foo
  </div>
</div>

JS:

.
当你说
responsive fixed时，你期望得到什么？
iframe应该是响应的和固定的吗？基本上它应该是固定的，并且仍然适合屏幕，例如，我打开一部手机，使iframe适合其屏幕大小。当你说
responsive fixed（响应固定）时，你希望看到什么？
iframe应该响应并固定吗？基本上，它应该固定并且仍然适合屏幕，例如，我打开手机，使iframe适合其屏幕大小。我不一定需要视频。我希望iFrAME宽度等于容器。考虑从容器中移除左右填充。我遇到的问题是<代码> <代码>元素宽度不会改变，因此从容器中移出，使iFrAMAR的右侧无法在较小尺寸的屏幕上看到。移除这里的填充物不会有帮助。在较小尺寸的屏幕上，高度会随着
宽度的减小而增加。哦，你的意思是删除填充，以便我可以使用
宽度：继承
？不确定Bootstrap是否将填充用于特定的内容…我已经编辑了我的答案，希望这能解决问题。我不一定想要视频。我希望iFrAME宽度等于容器。考虑从容器中移除左右填充。我遇到的问题是<代码> <代码>元素宽度不会改变，因此从容器中移出，使iFrAMAR的右侧无法在较小尺寸的屏幕上看到。移除这里的填充物不会有帮助。在较小尺寸的屏幕上，高度会随着
宽度的减小而增加。哦，你的意思是删除填充，以便我可以使用
宽度：继承
？不确定引导是否使用了特定的填充…我编辑了我的答案，希望这能解决问题。问题是iframe的右侧在较小的屏幕上不可见。我希望iframe始终粘在容器内。高度可能因此而改变，因此
Height:auto就可以了。问题是iframe的右侧在较小尺寸的屏幕上不可见。我希望iframe始终粘在容器内。高度可能因此而改变，因此
Height:auto就可以了。只是宽度的问题，这不是我想要的。我只希望iframe能够装入容器元素中。就这些。当屏幕尺寸变小时，容器元素也会变小，因此固定元素也会变小。但是使用宽度inherit会增加填充，一旦屏幕小于767 px或其他值，容器的宽度就不会设置，这使得使用
width:inherit
（几乎？）是不可能的。蓝色（带有类
.fixed
）看起来完全在容器元素内部，但它需要固定，并且包含iframeI不理解当宽度小于767px时会发生什么。您能再解释一下吗？引导程序似乎使用了一个mediaquery:
@media（最小宽度：768px）。因此，如果屏幕较小，则没有为宽度属性设置值。我希望看到的结果是：这不是我想要的结果。我只希望iframe能够装入容器元素中。就这些。当屏幕尺寸变小时，容器元素也会变小，因此固定元素也会变小。但是使用宽度inherit会增加填充，一旦屏幕小于767 px或其他值，容器的宽度就不会设置，这使得使用
width:inherit
（几乎？）是不可能的。蓝色（带有类
.fixed
）在容器内看起来非常完美