Bootstrap 5标签页切换时Flex内容未隐藏问题该如何解决？

问题根因 #

• ID匹配错误：Map标签按钮的data-bs-target属性值为#home，但对应地图tab面板的ID是mappanel，二者不匹配导致Bootstrap标签切换逻辑异常
• CSS属性覆盖冲突：自定义CSS中给#mappanel设置了display:flex，优先级高于Bootstrap默认的.tab-pane {display:none}规则，导致未激活的地图面板无法正常隐藏，就是你观察到的display:none被划除失效的原因
• Bootstrap JS版本冲突：同时引入了5.1.0和5.0.0-beta2两个版本的Bootstrap JS文件，会导致组件交互逻辑混乱
• Leaflet尺寸初始化问题：如果地图在标签未激活状态下加载，会因为容器尺寸为0导致地图渲染异常，切换后需要主动触发重绘

修复步骤 #

1. 修正标签和面板的ID匹配：将Map标签按钮的data-bs-target改为#mappanel
2. 调整CSS规则，仅在tab面板激活时应用flex布局：将#mappanel {display:flex}修改为.tab-pane.active#mappanel {display:flex}，避免覆盖默认隐藏规则
3. 删除重复的Bootstrap JS引入，仅保留一个正式版本即可
4. 监听Bootstrap标签切换事件，切换到地图标签时主动调用Leaflet的invalidateSize()方法重绘地图，保证尺寸正常

修复后的代码示例 #

HTML部分

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> 
<link rel="stylesheet" type="text/css" href="template.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<ul class="nav nav-tabs d-flex" id="myTab">
  <li class="nav-item"><button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#mappanel" type="button">Map</button></li>
  <li class="nav-item"><button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button">other tab</button></li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="mappanel">
    <div id="mapid"></div>
  </div>
  <div class="tab-pane fade" id="profile">other tab content</div>
</div>

<!-- 只保留一个版本的Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script>
// 地图初始化逻辑移到外部
var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors',
}).addTo(myMap);
myMap.setView([20.210183, -87.460003], 20);

// 监听标签切换事件，切换到地图标签时重绘地图
const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  triggerEl.addEventListener('shown.bs.tab', event => {
    if (event.target.getAttribute('data-bs-target') === '#mappanel') {
      myMap.invalidateSize()
    }
  })
})
</script>

CSS部分

html, body, #mappanel {  margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
/* 仅激活状态下应用flex布局 */
.tab-pane.active#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content  {flex: 1;}

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