Bootstrap 选项卡内容下降

Question

I have a big problem with my Bootstrap tab-pane content.

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

The Content goes on every tab a bit more down.
So #mastery1 looks fine but #mastery2's content is 200px lower then #mastery1 etc etc.
I don't understand why. I check every <div> .

You can see it here on the "Mastery Tab": https://lolstats.org/HORNETDanny/euw

Answer 1

You're missing a div for your mastery tabs. Wrap the mastery divs in a new div using tab-content.

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

This applies the following CSS rule:

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

Since divs have height, each div was taking up space on the page. Setting them to display: none , gives them no height. When a selected div has the active css class, the following rule is applied overriding the display none .

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

Answer 2

Try wrapping your divs for each tab (with class of tab-pane ) in a div with class="tab-content" such as:

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

See the Bootstrap document for tabs here: https://getbootstrap.com/javascript/#markup

Answer 3

Also it is worth noting that for some magic reason flex doesn't like tab-pane class so if you want to have flex conatiner inside tab you have to do this like:

<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="1-tab">
        <div class="d-flex flex-row flex-wrap">
        # something here
    </div>
</div>

if you put d-flex in the same div as tab-pane content is hidden but it still takes space that's why it is moved down.

Answer 4

You are getting that abnormality because the first tab hides but still occupies the space it was occupying in the first place. The work around i did was to find a way to hide it whenever any of the other tabs is clicked and show it when it is clicked.

In your HTML add the [class] property to your tags like this

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

Then add the click event to your tabs title like this

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

then in your typescript declare the variable as follows

hideFirst: string = "hide"

Also create the clickTab function as follows

clickTab(num){ this.hideFirst = num === 1? 'show': 'hide'; }

THis should do the trick...Happy coding:)