Bootstrap框架下iframe地图无法响应式，移动端不可见问题求助

一、手机端地图不可见的直接原因 #

最外层容器的d-none d-sm-block类是核心问题：这个Bootstrap类的作用是屏幕宽度小于576px（sm断点，即手机端）时隐藏元素，仅在sm及以上尺寸的屏幕显示，所以手机端自然看不到地图。

解决方法：

• 若要全设备显示地图，直接替换为d-block类，或删除该响应式隐藏类
• 若需针对极小屏做特殊调整，可保留d-sm-block并添加d-xs-block（Bootstrap 5中xs为默认断点，直接用d-block即可）

二、让iframe实现响应式布局 #

iframe写死固定宽度width="1100"无法自适应屏幕，提供两种解决方案：

方法1：使用Bootstrap内置响应式嵌入容器 #

Bootstrap提供ratio类实现比例自适应，步骤如下：

1. 将iframe放入ratio容器，选择合适的比例（如ratio-4x3或ratio-16x9）
2. 给iframe添加w-100 h-100类，删除固定的width和height属性

示例代码：

<div class="container mb-5 pb-4">
  <div class="ratio ratio-4x3" style="height: 480px;">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5994.821337674272!2d69.25345364107476!3d41.29992894681807!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38ae8ae3e16117eb%3A0xe38bf57767a5d5a9!2z0KjQutC-0LvQsCDihJY5MQ!5e0!3m2!1sru!2s!4v1689872593583!5m2!1sru!2s" 
            style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

方法2：自定义响应式容器（兼容旧版本） #

如果使用Bootstrap 3或需要自定义样式，可添加以下CSS：

.map-wrapper {
  position: relative;
  padding-bottom: 75%; /* 4:3比例，可根据需求调整 */
  height: 0;
  overflow: hidden;
}
.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

对应HTML结构：

<div class="container mb-5 pb-4">
  <div class="map-wrapper">
    <iframe src="你的地图URL" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

三、紧急修复：清理多版本Bootstrap冲突 #

你的页面同时引入了Bootstrap 5.0.2、Bootstrap 3.3.0、本地Bootstrap，这会导致严重的样式和JS冲突，是很多布局问题的根源：

• 只保留一个Bootstrap版本（推荐保留Bootstrap 5.0.2，功能更完善）
• 删除所有其他Bootstrap的CSS和JS引用：包括Bootstrap 3的CDN链接、本地的bootstrap.min.css和bootstrap.min.js
• 若需使用jQuery，替换为3.6+版本（Bootstrap 5无需jQuery，但部分插件可能依赖）

清理后的头部引用示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<link rel="stylesheet" href="{% static 'blog/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/themify-icons.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/nice-select.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/gijgo.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/animate.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/slicknav.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">

<script src="{% static 'blog/js/vendor/modernizr-3.5.0.min.js' %}"></script>
<script src="{% static 'blog/js/vendor/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'blog/js/popper.min.js' %}"></script>
<script src="{% static 'blog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'blog/js/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'blog/js/ajax-form.js' %}"></script>
<script src="{% static 'blog/js/waypoints.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.counterup.min.js' %}"></script>
<script src="{% static 'blog/js/imagesloaded.pkgd.min.js' %}"></script>
<script src="{% static 'blog/js/scrollIt.js' %}"></script>
<script src="{% static 'blog/js/jquery.scrollUp.min.js' %}"></script>
<script src="{% static 'blog/js/wow.min.js' %}"></script>
<script src="{% static 'blog/js/nice-select.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.slicknav.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'blog/js/plugins.js' %}"></script>
<script src="{% static 'blog/js/gijgo.min.js' %}"></script>

<!--contact js-->
<script src="{% static 'blog/js/contact.js' %}"></script>
<script src="{% static 'blog/js/jquery.ajaxchimp.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.form.js' %}"></script>
<script src="{% static 'blog/js/jquery.validate.min.js' %}"></script>
<script src="{% static 'blog/js/mail-script.js' %}"></script>

<script src="{% static 'blog/js/main.js' %}"></script>

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