我的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的内容比＃mastery1等低200px。
我不明白为什么。我检查每个<div>。
您可以在“精通选项卡”上看到它：https : //lolstats.org/HORNETDanny/euw
您缺少精通标签的div。使用tab-content将精通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，则没有高度。当所选的div具有activeCSS类，下面的规则被应用重写display none。
.tab-content>.active {
display: block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句