Bootstrap5選項卡中的Flex內容在更改選項卡后沒有隱藏？

Bootstrap 5 選項卡有一個 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/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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;}

我們做錯了什么？

uj5u.com熱心網友回復：

兩個錯誤

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/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：css 推特引导 弹性盒 传单 bootstrap-5

上一篇：在Python中從文本檔案中洗掉重復的反向字串

下一篇：如何在繼承第一行類的DataTable上附加TR？