小视口下上方iframe被下方重叠，如何修复Bootstrap响应式布局？

问题根源 #

1. iframe设置height:200%但父容器无明确高度基准，导致浏览器计算高度时出现异常，窗口缩放时布局错乱重叠。
2. 列元素重复使用col类，Bootstrap 4栅格类重复会触发样式冲突，干扰布局逻辑。
3. 父row的padding-bottom:160px属于冗余设置，反而会影响高度计算的准确性。

修复方案 #

1. 调整CSS，给iframe和父容器明确高度基准

iframe {
  background: pink;
  border: 1px solid #333 !important;
  height: 100% !important; /* 让iframe占满父容器高度 */
}

.dashboard-col {
  height: 300px; /* 自定义高度，可根据需求调整为固定值或自适应值 */
}

2. 修正HTML结构，清理冗余类和样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="container-fluid col-xl-8 pl-0 pr-0 pl-lg-4 pr-lg-4">
  <div class="row mt-1">
    <div class="col-12 col-md-6 pr-1 dashboard-col">
      <iframe src="iframe-link" allowfullscreen="" style="width: 100%; border: 0;"></iframe>
    </div>

    <div class="col-12 col-md-6 pl-md-1 dashboard-col">
      <iframe src="iframe-link" allowfullscreen="" style="width: 100%; border: 0;"></iframe>
    </div>
  </div>
</div>

关键修改说明 #

• 移除列元素上重复的col类，确保Bootstrap栅格样式正常生效。
• 给列添加自定义类dashboard-col并设置固定高度，为iframe提供明确的高度参考，彻底解决百分比高度导致的布局错乱。
• 将mt-1移至row上统一控制顶部间距，避免重复设置。
• 删除iframe上的height:200%和display:initial，改用height:100%实现父容器高度适配。
• 移除row上冗余的padding-bottom:160px，如需底部间距可使用Bootstrap内置的mb-*间距类。

自适应高度扩展方案 #

如果需要iframe高度随视口自适应，可调整容器高度为视口高度减去顶部/底部间距：

#myContainer {
  height: calc(100vh - 60px); /* 60px为顶部/底部预留间距，可按需调整 */
}

.row {
  height: 100%;
}

.dashboard-col {
  height: 100%;
}

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