Bootstrap 4 вкладки исчезают, давая дополнительное пространство на N + 1 вкладках

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 показывает пустое пространство для содержимого на 1 и 2 выше фактического содержимого вкладки 3, и т. Д. c .)

Я посмотрел на такие вопросы, как this , и попытался отладить в скрипте, чтобы убедиться, что проблема не в другом месте моего приложения, но проблема согласована. Я также попробовал сделать это с одним словом в качестве содержимого вкладки (вместо отображаемого фрагмента), и проблема сохраняется, поэтому я знаю, что это не ошибка в отображаемом фрагменте.

Может кто-нибудь увидеть, где я не так?

ОБНОВЛЕНИЕ

Я поместил только отрендеренный код в JS Fiddle , и он, кажется, работает нормально, но когда он отображается на странице (видимый здесь ), проблема все еще появляется. Вот вся страница, если это имеет значение:

<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) также будет работать.