Bootstrap 4 Tabs Fade 在 N+1 Tabs 上产生额外的空间

Question

我在我的 Rails 5.2 应用中使用 Bootstrap 4 设置了以下选项卡：

<div class="classic-tabs mx-2 mb-5">

  <ul class="nav" id="myClassicTabShadow" role="tablist">
    <li class="nav-item">
      <a class="nav-link  waves-light active show" id="tab-all" data-toggle="tab" href="#area-all" role="tab" aria-controls="area-all" aria-selected="true">All</a>
    </li>
    <li class="nav-item">
      <a class="nav-link  waves-light" id="tab-general" data-toggle="tab" href="#area-general" role="tab" aria-controls="area-general" aria-selected="true">General</a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" id="tab-seo" data-toggle="tab" href="#area-seo" role="tab" aria-controls="area-seo" aria-selected="false">SEO</a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" id="tab-sm" data-toggle="tab" href="#area-sm" role="tab" aria-controls="area-sm" aria-selected="false">Social Media</a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" id="tab-templates" data-toggle="tab" href="#area-templates" role="tab" aria-controls="area-templates" aria-selected="false">Templates</a>
    </li>
  </ul>

  <div class="tab-sm card" id="myClassicTabContentShadow">
    <div class="tab-pane fade active show" id="area-all" role="tabpanel" aria-labelledby="tab-all">
      <%= render partial: "resources/tab_interior", locals: { resources: @resources } %>
    </div>
    <div class="tab-pane fade" id="area-general" role="tabpanel" aria-labelledby="tab-general">
      <%= render partial: "resources/tab_interior", locals: { resources: @general } %>
    </div>
    <div class="tab-pane fade" id="area-seo" role="tabpanel" aria-labelledby="tab-seo">
      <%= render partial: "resources/tab_interior", locals: { resources: @seo } %>
    </div>
    <div class="tab-pane fade" id="area-sm" role="tabpanel" aria-labelledby="tab-sm">
      <%= render partial: "resources/tab_interior", locals: { resources: @sm } %>
    </div>
    <div class="tab-pane fade" id="area-templates" role="tabpanel" aria-labelledby="tab-templates">
      <%= render partial: "resources/tab_interior", locals: { resources: @templates } %>
    </div>
  </div>
</div> <!-- classic tabs -->

选项卡看起来不错并且可以正确切换内容，但是在除第一个选项卡之外的所有选项卡上，前一个选项卡内容所在的正确内容上方都有空白区域。 （所以它就在选项卡 1 上，选项卡 2 显示一个空格，即选项卡 1 内容的高度，然后是选项卡 2 的内容，选项卡 3 显示实际选项卡 3 内容上方 1 和 2 的内容的空白空间，等等。）

我查看了诸如 this 之类的问题，并尝试调试以确保问题不在我的应用程序的其他地方，但问题是一致的。我也试过用一个单词作为选项卡内容（而不是渲染的部分）并且问题仍然存在，所以我知道这不是渲染部分中的错误。

谁能看出我哪里出错了？

更新

我只将呈现的代码放在JS Fiddle 中，它似乎可以正常工作，但是当它呈现在页面上时（可见here），问题仍然存在。这是整个页面，如果有区别的话：

<main class="container-fluid px-5">

  <% if current_user && current_user.admin %>
    <section class="text-right pt-2">
      <%= link_to 'Add a New Resource', new_resource_path, class: "btn btn-blue btn-sm" %>
    </section>
  <% end %>

  <heading class="text-center my-5">
    <h1>Scary Tech Resources</h1>
  </heading>



  <!-- Classic tabs -->
<div class="classic-tabs mx-2 mb-5">

  <ul class="nav" id="myClassicTabShadow" role="tablist">
    <li class="nav-item">
      <a class="nav-link  waves-light active show" id="tab-all" data-toggle="tab" href="#area-all" role="tab" aria-controls="area-all" aria-selected="true">All</a>
    </li>
    <li class="nav-item">
      <a class="nav-link  waves-light" id="tab-general" data-toggle="tab" href="#area-general" role="tab" aria-controls="area-general" aria-selected="true">General</a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" id="tab-seo" data-toggle="tab" href="#area-seo" role="tab" aria-controls="area-seo" aria-selected="false">SEO</a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" id="tab-sm" data-toggle="tab" href="#area-sm" role="tab" aria-controls="area-sm" aria-selected="false">Social Media</a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" id="tab-templates" data-toggle="tab" href="#area-templates" role="tab" aria-controls="area-templates" aria-selected="false">Templates</a>
    </li>
  </ul>

  <div class="tab-sm card" id="myClassicTabContentShadow">
    <div class="tab-pane fade active show" id="area-all" role="tabpanel" aria-labelledby="tab-all">
      <%= render partial: "resources/tab_interior", locals: { resources: @resources } %>
    </div>
    <div class="tab-pane fade" id="area-general" role="tabpanel" aria-labelledby="tab-general">
      <%= render partial: "resources/tab_interior", locals: { resources: @general } %>
    </div>
    <div class="tab-pane fade" id="area-seo" role="tabpanel" aria-labelledby="tab-seo">
      <%= render partial: "resources/tab_interior", locals: { resources: @seo } %>
    </div>
    <div class="tab-pane fade" id="area-sm" role="tabpanel" aria-labelledby="tab-sm">
      <%= render partial: "resources/tab_interior", locals: { resources: @sm } %>
    </div>
    <div class="tab-pane fade" id="area-templates" role="tabpanel" aria-labelledby="tab-templates">
      <%= render partial: "resources/tab_interior", locals: { resources: @templates } %>
    </div>
  </div>
</div> <!-- classic tabs -->

<!-- Classic tabs -->





</main>




<script>
    $(document).ready(function(){
    $('.card-text').matchHeight();
    })
</script>

Answer 1

#myClassicTabContentShadow .fade:not(.show) {
  position: absolute;
  width: 100%;
}
#myClassicTabContentShadow .fade.show {
  min-height: 400px;
}

...修复它。

工作是position: absolute。其余的是修复动画的次要样式。

基本上，.card 规则与 .tab-sm 规则冲突。最有可能的是，将它们放在两个不同的元素上 (.tab-sm > .card) 也可以。