如何让嵌入式地图不溢出父容器？Bootstrap前端布局问题求解

问题原因 #

你为iframe设置了固定400px宽度，当视口宽度小于Bootstrap的md断点（768px）时，父容器.col-md-8会自动占满整行宽度，若此时视口宽度不足400px，固定宽度的iframe就会超出父容器边界，产生溢出。

解决方法 #

方法1：使用Bootstrap原生响应式嵌入工具类（推荐） #

Bootstrap 5内置的ratio系列类可以自动让嵌入内容适配父容器宽度，同时保持固定宽高比，无需额外编写自定义CSS：

1. 删除iframe标签上的width和height属性
2. 在iframe外层包裹一个div，添加ratio类和对应比例类，正方形可使用ratio-1x1，也可选择ratio-4x3、ratio-16x9等官方预设比例
   修改后的代码片段如下：

<div class="col-md-8 bg-warning">
  <div class="ratio ratio-1x1">
    <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26610.33705707623!2d36.25777643698207!3d33.519789553048696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1518e74d9556cc31%3A0x1ccf35bcb0a51b26!2sStory%20corner!5e0!3m2!1sen!2s!4v1629485063423!5m2!1sen!2s" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  </div>
</div>

方法2：自定义CSS适配 #

如果需要保留固定400px高度，只做宽度适配，可直接修改iframe的样式：

1. 删除iframe的width属性，保留height="400px"
2. 给iframe添加width: 100%; max-width: 100%;样式，可直接写在行内style属性中，也可以给.map类添加对应样式规则
   修改后的代码片段如下：

<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26610.33705707623!2d36.25777643698207!3d33.519789553048696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1518e74d9556cc31%3A0x1ccf35bcb0a51b26!2sStory%20corner!5e0!3m2!1sen!2s!4v1629485063423!5m2!1sen!2s" height="400px" style="border:0;width:100%;max-width:100%;" allowfullscreen="" loading="lazy"></iframe>

以上两种方法都可以彻底解决iframe溢出父容器的问题，方法1更符合Bootstrap的设计规范，适配性更强。

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