媒体查询中使用flex布局时Leaflet地图Div消失求助

1. 移除冲突的Leaflet版本 #

你同时引入了Leaflet 0.7.7和1.9.3两个版本，JS冲突会直接破坏地图初始化逻辑。删除旧版本的引入：

<!-- 删除以下两行旧版本代码 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>

仅保留1.9.3版本的CSS和JS引用即可。

2. 给移动端地图容器设置明确高度 #

Leaflet地图必须依赖容器的明确宽高才能渲染，你当前移动端的.map仅设置了flex-basis:200px，没有固定高度，修改CSS：

/* 移动端地图样式调整 */
.map {
  width: 100%;
  /* 设置固定高度，可根据需求调整数值 */
  height: 300px;
  /* 防止flex布局下被挤压 */
  flex-shrink: 0;
}

如果希望地图自动填充剩余空间，可给父容器设置flex布局：

.col-8.main-container {
  display: flex;
  flex-direction: column;
  /* 确保父容器有足够高度 */
  min-height: calc(100vh - 80px);
}

/* 让上方统计栏占固定高度，地图填充剩余空间 */
.container-fluid.main-data {
  flex-shrink: 0;
}

.map {
  width: 100%;
  flex: 1;
  /* 设置最小高度避免空间不足时消失 */
  min-height: 250px;
}

3. 修复全局flex布局冲突 #

你给所有[class*="col-"]设置了display:flex，会导致列布局嵌套时出现异常，修改移动端样式：

/* 移除全局col的flex设置 */
/* [class*="col-"] {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  } */

/* 仅给需要的容器设置flex */
.col-12 header, .col-8.main-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* 移动端侧边栏改为块级元素，避免挤压 */
.left-sidebar.col-1 {
  width: 100%;
  display: block;
  margin-bottom: 15px;
}

4. 确保DOM加载完成后初始化地图 #

将地图初始化代码放到DOM加载完成事件中，避免容器未渲染时执行：

document.addEventListener('DOMContentLoaded', function() {
  var map = L.map('map').setView([45.505, -73.19], 9); 
  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
      attribution: '© OpenStreetMap contributors'
  }).addTo(map);
});

核心问题是地图容器缺少明确高度，加上版本冲突导致初始化失败，调整以上几点后移动端地图即可正常显示。

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