Bootstrap 4 个标签在 N+1 个标签上产生额外的 Space

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 -->

这些选项卡看起来不错，并且可以正确切换内容，但在除第一个选项卡之外的所有选项卡上，正确内容上方都有空白 space，而前一个选项卡的内容所在的位置。（所以它就在选项卡 1 上，选项卡 2 显示空白 space 选项卡 1 内容的高度然后选项卡 2 的内容，选项卡 3 显示空白 space 来自 1 和 2 的内容高于实际选项卡 3 内容等）

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

谁能看出我错在哪里？

更新

我只将呈现的代码放在 JS Fiddle and it appears to work okay, but when it's rendered on the page (visible 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) 也可以。

Bootstrap 4 个标签在 N+1 个标签上产生额外的 Space

Bootstrap 4 Tabs Fade Yielding Extra Space on N+1 Tabs

javascript

ruby-on-rails-5

bootstrap-4