#myClassicTabContentShadow .fade:not(.show) { opacity: 0; position: absolute; width: 100%; } #myClassicTabContentShadow .fade.show { min-height: 400px; }...修复它。
我在带有Bootstrap 4的Rails 5.2应用程序中设置了以下选项卡：
<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之类的问题，并尝试在调试中进行调试，以确保该问题不在我的应用程序中的其他地方，但是问题始终存在。我还尝试了一个单词作为制表符内容（而不是呈现的部分），并且问题仍然存在，所以我知道在呈现的部分中这不是错误。
谁能看到我要去哪里了吗？
UPDATE
我只将呈现的代码放在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>
[我在带有Bootstrap 4的Rails 5.2应用程序中设置了以下选项卡：
#myClassicTabContentShadow .fade:not(.show) { opacity: 0; position: absolute; width: 100%; } #myClassicTabContentShadow .fade.show { min-height: 400px; }...修复它。