Содержимое вкладки Bootstrap снижается

Question

У меня большая проблема с содержимым вкладки Bootstrap.

<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 составляет 200px ниже, чем # mastery1 и т. Д.
Не понимаю, почему. Я проверяю каждый <div>.

Вы можете увидеть его здесь на «Мастерства Tab»: https://lolstats.org/HORNETDanny/euw

Answer 1

Вы не нашли DIV для вкладок мастерства. Оберните мастерские divs в новый 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; 
} 

С дивы имеют высоту, каждый ДИВ был занимает много места на странице. Установка их на display: none, не дает им высоты. Когда выбранный div имеет класс css active, применяется следующее правило, переопределяющее display none.

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

Answer 2

Try оборачивать ваши дивы для каждой вкладки (с классом tab-pane) в div с class="tab-content", таких как:

<div class="tab-content"> 
     <div id="mastery1" class="tab-pane fade"> 
     <h1>Show the last 10 Games</h1> 
     <div> 
     <!-- more tab content --> 
    </div> 

Смотрите документ Bootstrap для вкладок здесь: https://getbootstrap.com/javascript/#markup