Bootstrap 5选项卡中的Flex内容在更改选项卡后没有隐藏？

Question

Bootstrap 5 tab 有一个 Leaflet 映射，我们希望在选中它时填充所有剩余空间。我们得到了这个工作，但现在在更改标签时，第一个区域不会消失。

我们认为这可能是由于 CSS 中的“.tab-content > .tab-pane { display: none; }”属性没有被使用或覆盖，如删除线所示，但是我们不知道如何解决这个问题。

简化示例：

<script type="text/javascript" language="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="#home" 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>
      <script>var myMap = L.map("mapid");
      L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(myMap);
      myMap.setView([20.210183, -87.460003], 20);</script>
  </div>
  <div class="tab-pane fade" id="profile">other tab content</div>
</div>

<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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

CSS：

html, body, #mappanel {  margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content  {flex: 1;}

我们做错了什么？

Answer 1

两个错误

1. 第一个选项卡窗格必须是 id="home" 而不是 id="mappanel"
2. 如果您需要 mappanel，您必须在选项卡窗格中使用额外的 div。 见下文

<script type="text/javascript" language="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="#home" 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="home">
     <div id="mappanel">    
        <div id="mapid"></div>
          <script>var myMap = L.map("mapid");
          L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(myMap);
          myMap.setView([20.210183, -87.460003], 20);</script>
     </div>
  </div>
  <div class="tab-pane fade" id="profile">other tab content</div>
</div>

<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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<style>
html, body, #mappanel {  margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content  {flex: 1;}
</style>