title: Using panels inside of tab-content
body: <p>I'm using panels inside of tab-content.  e.g.</p>
  
  <pre><code>        &lt;div class="tab-content" id="myTabContent"&gt;
              &lt;div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-3 col-md-6"&gt;
                          &lt;div class="panel panel-default"&gt;
                              ...
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;div class="tab-pane fade show" id="interfaces" role="tabpanel" aria-labelledby="interfaces-tab"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-3 col-md-6"&gt;
                          &lt;div class="panel panel-default"&gt;
                              ...
  </code></pre>
  
  <p>The (non-panel) code was copied from an example at: <a href="https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior</a></p>
  
  <p>The problem I have is that when the "interfaces" tab is selected, its panels are displayed in positions which take account of the now-invisible "general" tab's panels.</p>
  
  <p>How can I get each tab-pane to be laid-out without leaving spaces for invisible panes from other tabs? </p>