第二个选项卡上的 Bootstrap5 选项卡内容创建无限空白答案

【问题标题】：Bootstrap5 tab content on second tab creates unlimited white space第二个选项卡上的 Bootstrap5 选项卡内容创建无限空白
【发布时间】：2021-11-12 19:36:17
【问题描述】：

在我的项目中，我想显示当月和当年的统计数据。为了拆分此统计信息，我创建了一张卡片，其中包含拆分月份和年份的选项卡。月份选项卡默认加载。如果我现在进入年份选项卡，所有内容都在加载，但是它将加载无限的空“资料/白色数据”（我不知道如何更好地解释它），并且您不能使用此选项卡，因为该网站将越来越大。也没有错误

这是在我将所有图表 (chart.js) 更改为您可以使用的动态方式后首先弹出的，例如到下个月或前一个月。如果我使用“固定”数据加载所有图表，则该选项卡可以正常工作。

有什么问题？

实际外观：

它的外观：

经过一些测试，我看到了这个：

代码 sn-p：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-header">
                      <div>
                          <ul class="nav nav-pills nav-fill mt-4" role="tablist">
                              <li class="nav-item active">
                                  <a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
                                      <span><strong>Current Month</strong></span>
                                  </a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
                                      <span><strong>Current Year</strong></span>
                                  </a>
                              </li>
                          </ul>
                      </div>
                  </div>
                  <div class="card-body">
                      <div class="tab-content">
                          <div class="tab-pane active" id="Month" role="tabpanel">
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="row">
                                          <div class="card-header d-flex justify-content-between align-items-center">
                                              <h2 class="card-title" id="month"></h2>
                                              <div class="justify-content-end">
                                                  <button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
                                                  <button class="btn btn-info current-month" id="current-month">Current Month</button>
                                                  <button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div class="card">
                                          <div class="card-header bg-inverse">
                                              <h2 class="card-title text-white" id="monthly_training_sessions"></h2>
                                          </div>
                                          <div class="card-body">
                                              <span class="badge chart-label-intervall">Intervall</span> 
                                              <span class="badge chart-label-longrun">Longrun</span> 
                                              <span class="badge chart-label-speedwork">Speedwork</span> 
                                              <span class="badge chart-label-stabilisation">Stabilisation</span> 
                                              <span class="badge chart-label-competition">Competition</span> 
                                              <span class="badge chart-label-cycling">Cycling</span>
                                              <span class="badge chart-label-swimming">Swimming</span>
                                              <br><br>
                                              <canvas id="monthy_session_stats" width="180" height="180"></canvas>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div class="card">
                                          <div class="card-header bg-inverse d-flex justify-content-between">
                                              <h2 class="card-title text-white" id="monthly_training_days"></h2>
                                              <h2 class="card-title text-white" id="monthly_injury_days"></h2>
                                          </div>
                                          <div class="card-body">
                                              <div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
                                                  <span class="badge chart-label-training">Training</span> 
                                                  <span class="badge chart-label-injury">Free</span> 
                                                  <span class="badge chart-label-free">Injury</span> 
                                              </div>
                                              <br>
                                              <canvas id="monthy_training_stats" width="180" height="180"></canvas>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div class="card">
                                          <div class="card-header bg-inverse">
                                              <h2 class="card-title text-white">Shoes</h2>
                                          </div>
                                          <div class="card-body">
                                              <div class="table-responsive">
                                                  <table class="table">
                                                      <tbody id="monthly_shoes_stats">                                                            
                                                      </tbody>
                                                  </table>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="tab-pane" id="Year" role="tabpanel">
                              <div class="row">
                                  <div class="col-md-12">
                                      <div class="row">
                                          <div class="card-header d-flex justify-content-between align-items-center">
                                              <h2 class="card-title" id="year"></h2>
                                              <div class="justify-content-end">
                                                  <button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
                                                  <button class="btn btn-info current-year" id="current-year">Current Year</button>
                                                  <button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div class="card">
                                          <div class="card-header bg-inverse">
                                              <h2 class="card-title text-white" id="yearly_training_sessions"></h2>
                                          </div>
                                          <div class="card-body">
                                              <span class="badge chart-label-intervall">Intervall</span> 
                                              <span class="badge chart-label-longrun">Longrun</span> 
                                              <span class="badge chart-label-speedwork">Speedwork</span> 
                                              <span class="badge chart-label-stabilisation">Stabilisation</span> 
                                              <span class="badge chart-label-competition">Competition</span> 
                                              <span class="badge chart-label-cycling">Cycling</span>
                                              <span class="badge chart-label-swimming">Swimming</span>
                                              <br><br>
                                              <canvas id="yearly_session_stats" width="180" height="180"></canvas>
                                          </div> 
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div class="card">
                                          <div class="card-header bg-inverse d-flex justify-content-between">
                                              <h2 class="card-title text-white" id="yearly_training_days"></h2>
                                              <h2 class="card-title text-white" id="yearly_injury_days"></h2>
                                          </div>
                                          <div class="card-body">
                                              <div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
                                                  <span class="badge chart-label-training">Training</span> 
                                                  <span class="badge chart-label-injury">Free</span> 
                                                  <span class="badge chart-label-free">Injury</span> 
                                              </div>
                                              <br>
                                              <canvas id="yearly_training_stats" width="180" height="180"></canvas>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div class="card">
                                          <div class="card-header bg-inverse">
                                              <h2 class="card-title text-white">Shoes</h2>
                                          </div>
                                          <div class="card-body">
                                              <div class="table-responsive">
                                                  <table class="table">
                                                      <tbody id="yearly_shoes_stats">
                                                      </tbody>
                                                  </table>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>

【问题讨论】：

标签： javascript html bootstrap-5

【解决方案1】：

经过大量研究和阅读，我找到了解决此问题的方法。

问题的出现是因为隐藏选项卡的隐藏内容，在Bootstrap中通过“display: none”实现。

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

要解决这个问题，你可以使用height: 0 和overflow-y: hidden 来解决这个问题。现在图表将保留在原位，不会创建空白的随机空间。

.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}

【讨论】：

【解决方案2】：

逐行浏览该内容需要一点时间，但其中一些问题肯定是您的行和列结构。我在前几行中注意到了这一点 - 就在 tab-content 里面是这个......

 <div class="tab-pane active" id="Month" role="tabpanel">
               <div class="row">
                 <div class="col-md-12">
                   <div class="row">

使用 Bootstrap，您并不是真的要将 Row's 放在 Column's 中，我认为正在发生的事情是代码的非自然布局会产生像您看到的那样的错误。这个答案没有发现你的空白来自哪里，但我怀疑修复代码的布局也会修复空白。

【讨论】：

row inside column 在需要将一个大的 div 分成列然后将每一列用作进一步列的行时是相当正常的。这不是不自然的。最后它只是一个包含另一个 flex div 的 flex div。
哦，是的。我看到那行现在在做什么。谢谢悉达多。