默认情况下如何使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">