默认情况下如何使bootstrap 3选项卡导航处于活动状态？

Question

使用bootstrap 3我正在尝试这个exameple，在li元素中使用class =“active”。不幸的是，当页面最初显示时，没有显示选项卡窗格，整个选项卡内容为空。选项卡导航显示正确，当我明确单击选项卡时，将显示正确的窗格。

我缺少什么？

提前致谢。

<ul class="nav nav-tabs">
    <li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li>
    <li><a href="#graduate" data-toggle="tab">graduate</a></li>
    <li><a href="#extension" data-toggle="tab">extension</a></li>
</ul>
<div class="tab-content" id="TabContent">
    <div class="tab-pane fade" id="graduation">
        <p>
            anything
        </p>
    </div>
    <div class="tab-pane fade" id="graduate">
        <p>
            graduate
        </p>
    </div>
    <div class="tab-pane fade" id="extension">
        <p>
            extension
        </p>
    </div>
</div>

Answer 1

您还需要在默认active上指定tab-pane类（对于需要添加in类的淡入标签），您应该更改

<div class="tab-pane fade" id="graduation">

到

<div class="tab-pane fade in active" id="graduation">

Answer 2

对于正在为bootstrap 4

寻找答案的人

boostrap 4

<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">

与boostrap 3相比

<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">