容器内maps元素响应异常：过度收缩问题求助

问题描述 #

设备屏幕缩小时，容器内其他元素响应正常，但地图iframe过度收缩，和其他元素收缩幅度不一致。

正常状态：

收缩状态：

原HTML代码：

<div class="section">
    <div class="container">
    <div class="row justify-content-between">
    <div>
        <iframe src="{{ object.location }}" 
        class="col-lg-12" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    </div>
    </div>
</div>

问题原因 #

1. Bootstrap栅格结构不规范：row下嵌套了无栅格类的div，再给iframe加col-lg-12，导致小屏幕下宽度控制逻辑混乱。
2. iframe使用固定height="450"，屏幕收缩时宽度变小但高度不变，宽高比失衡，视觉上显得过度收缩。

解决步骤 #

1. 规范Bootstrap栅格嵌套 #

让row直接包含带栅格类的元素，确保响应式规则正常生效：

<div class="section">
    <div class="container">
        <div class="row justify-content-between">
            <!-- 用col类覆盖全屏幕宽度，小屏幕自动适配 -->
            <div class="col">
                <iframe src="{{ object.location }}" 
                style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>
</div>

2. 添加响应式宽高比容器 #

用Bootstrap自带的ratio类包裹iframe，替代固定height，保证屏幕收缩时宽高比例一致：

<div class="section">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col">
                <!-- 用ratio-4x3维持地图常用宽高比，也可换成ratio-16x9 -->
                <div class="ratio ratio-4x3">
                    <iframe src="{{ object.location }}" 
                    style="border:0; width: 100%; height: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

3. 自定义宽高比（可选） #

如果需要匹配原固定高度的比例，可自定义CSS类：

.custom-map-ratio {
    position: relative;
    width: 100%;
    height: 0;
    /* 对应原高度450、大屏幕宽度1200的比例 */
    padding-bottom: 37.5%;
}
.custom-map-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML代码替换为：

<div class="section">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col">
                <div class="custom-map-ratio">
                    <iframe src="{{ object.location }}" 
                    style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

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