两个div元素（其一含iframe）大屏下出现非预期垂直间距求助

你遇到的间距问题是Bootstrap响应式嵌入组件的特性和你给iframe加的最大宽高限制冲突导致的：

• Bootstrap的embed-responsive类默认通过基于容器宽度百分比的padding-top维持固定宽高比（你用的16:9对应padding-top为56.25%），容器宽度越大，整体高度越高
• 你给内部iframe设置了max-width:1000px、max-height:558px，当屏幕宽度超过1000px时，iframe已经达到最大宽高不再增长，但外层embed-responsive容器还会随屏幕宽度继续变高，多出来的容器高度就是你看到的两个div之间的空白，屏幕越大空白越大，完全符合你描述的现象。

你可以任选下面一种方式修复：

1. 样式表全局修改：给对应embed-responsive容器添加最大宽度限制

.embed-responsive.embed-responsive-16by9 {
  max-width: 1000px;
  /* 需要居中可添加：margin: 0 auto; */
}

2. 行内样式直接修改：直接在现有HTML的embed-responsive标签上加style属性

<div class="embed-responsive embed-responsive-16by9" style="max-width: 1000px;">

这样修改后，外层容器不会随屏幕宽度无限扩张，高度会和内部iframe的最大高度完全匹配，多余的空白间距就会消失。

内容的提问来源于stack exchange，提问作者Markob15