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的内容比＃mastery1等低200px 我不明白为什么。我检查每一个<div>。

您可以在“掌握标签”上看到它：https://lolstats.org/HORNETDanny/euw

Answer 1

您错过了精通标签的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具有active css类时，将应用以下规则覆盖display none。

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

Answer 2

另外，值得注意的是，出于某种魔术原因，flex不喜欢Tab窗格类，因此，如果要在tab中使用flex修饰符，则必须这样做：

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

如果您将d-flex放在与隐藏标签窗格相同的div中，但是它仍然占用空间，这就是将其向下移动的原因。

Answer 3

尝试使用preg_replace("/p(?!e)/", "", $string); tab-pane为每个标签（div类）包装div，例如：

class="tab-content"

请参阅Bootstrap文档中的标签：https://getbootstrap.com/javascript/#markup

Answer 4

您之所以出现这种异常，是因为第一个选项卡隐藏了，但仍然占据了它最初占据的空间。我所做的工作是找到一种方法，可以在单击任何其他选项卡时隐藏它，并在单击时显示它。

在您的 HTML 中将 [class] 属性添加到您的标签中

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

然后像这样将点击事件添加到您的标签标题

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

然后在你的打字稿中声明如下变量

hideFirst: string = "hide"

同时创建clickTab函数如下

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

这应该可以解决问题...快乐编码:)

Bootstrap选项卡内容下降

4 个答案: