html - Bootstrap 选项卡内容下降

Question

我的 Bootstrap 选项卡 Pane 内容有一个大问题。

<ul class="nav nav-pills nav-justified">
  <li class="active"><a data-toggle="tab" href="#masery1">Mastery Page 1</a></li>
  <li><a data-toggle="tab" href="#masery2">Mastery Page 2</a></li>
  <li><a data-toggle="tab" href="#masery3">Mastery Page 3</a></li>
  <li><a data-toggle="tab" href="#masery4">Mastery Page 4</a></li>
  <li><a data-toggle="tab" href="#masery5">Mastery Page 5</a></li>
  <li><a data-toggle="tab" href="#masery5">Mastery Page 6</a></li>
</ul>

<div id="masery1" class="tab-pane fade in active">
    <h1>Show the last 10 Games</h1>
</div>

<div id="masery2" class="tab-pane fade ">
    <h1>Show the last 10 Games</h1>
</div>
<div id="masery3" class="tab-pane fade">
    <h1>Show the last 10 Games</h1>
</div>
<div id="masery4" class="tab-pane fade">
    <h1>Show the last 10 Games</h1>
</div>
<div id="masery5" class="tab-pane fade">
    <h1>Show the last 10 Games</h1>
</div>

内容在每个选项卡上都更靠下。
所以#mastery1 看起来不错，但#mastery2 的内容比#mastery1 等低 200px。
我不明白为什么。我检查每个 <div> .

你可以在“精通选项卡”上看到它:https://lolstats.org/HORNETDanny/euw

Answer 1

您缺少用于掌握选项卡的 div。使用 tab-content 将 mastery div 包裹在一个新的 div 中。

<div class="tab-content">
    <div id="masery1" class="tab-pane fade in active">
         <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery2" class="tab-pane fade ">
         <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery3" class="tab-pane fade">
        <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery4" class="tab-pane fade">
        <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery5" class="tab-pane fade">
        <h1>Show the last 10 Games</h1>
    </div>
</div>

这应用了以下 CSS 规则:

.tab-content>.tab-pane {
    display: none;
}

由于 div 具有高度，因此每个 div 都会占用页面上的空间。将它们设置为 display: none，不给它们高度。 When a selected div has the active css class, the following rule is applied overriding the display none.

.tab-content>.active {
    display: block;
}