导航选项卡菜单中的Bootstrap 4第一个选项卡在页面加载时不显示

Question

我正在使用Bootstrap 4导航标签。在早期版本v3中，当页面加载时，第一个标签页会自动打开。在v4中，第一个标签不会在初始页面加载时打开，我必须单击该标签才能显示它。我需要在首次加载页面时打开第一个标签，但我不明白为什么它在Bootstrap 4中不起作用。

<div id="details" class="clearfix full-width-details details-content col-lg-12 col-md-12 col-sm-12">
<!-- tabs -->
<ul id="detailsTab" class="nav nav-tabs">

    @if (Model.Active == 0)
    {
        <li class="nav-item"><a href="@String.Concat(@Url.Action("ResidentInformationViewRequirements"), "/?RequestId=", Model.RequestId, "&Status=", Model.Active, "&ResidentId=", Model.ResidentId)" class="nav-link active" data-target="#detailsTab1" data-toggle="tab">@SharedResources.Index.UserData</a></li>
    }
    else if (Model.Active == 1)
    {
        <li class="nav-item"><a href="@String.Concat(@Url.Action("ResidentInformationWaitingListView"), "/?ResidentId=", Model.ResidentId, "&Status", Model.Active, "&RequestId=", Model.RequestId)" class="nav-link active" data-target="#detailsTab1" data-toggle="tab">@SharedResources.Index.UserData</a></li>
    }
</ul>


<div id="detailsTabContent" class="tab-content">

    <div id="detailsTab1" class="tab-pane active in"></div>
    <div id="detailsTab2" class="tab-pane in"></div>
    <div id="detailsTab3" class="tab-pane in"></div>
    <div id="detailsTab4" class="tab-pane in"></div>
    <div id="detailsTab5" class="tab-pane in"></div>
    <div id="detailsTab10" class="tab-pane in"></div>
    <div id="detailsTab6" class="tab-pane in"></div>
    <div id="detailsTab8" class="tab-pane in"></div>
    <div id="detailsTab9" class="tab-pane in"></div>
    <div id="detailsTab11" class="tab-pane in"></div>
    <div id="detailsTab12" class="tab-pane in"></div>
    <div id="detailsTab13" class="tab-pane in"></div>
    <div id="detailsTab14" class="tab-pane in"></div>
    <div id="detailsTab15" class="tab-pane in"></div>
    <div id="detailsTab16" class="tab-pane in"></div>
    <div id="detailsTab17" class="tab-pane in"></div>
    <div id="detailsTab18" class="tab-pane in"></div>
</div>