Question

我遇到一个问题，让bootstrap4标签正常工作，它们可以正常使用2个标签，使用以下代码：

<div class="row">
    <div class="col-12">
        <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist">
            <li class="nav-item">
                <a class="nav-link login-link active" role="tab" data-toggle="tab" href="#form-login">
                    Login
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link register-link" role="tab" data-toggle="tab" href="#form-register">
                    Register
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="tab-content">
            <div id="form-login" class="tab-pane fade show active" role="tabpanel">
                {include file="inc/shared/my-account/login-form.html"}
            </div>
            <div id="form-register" class="tab-pane fade" role="tabpanel">
                {include file="inc/shared/register/form.html"}
            </div>
        </div>
    </div>
</div>

但这打破了：

<div class="row">
    <div class="col-12">
        <ul class="nav nav-tabs" id="cart-picker-acc-select" role="tablist">
            <li class="nav-item">
                <a class="nav-link login-link active" id="form-login-top" role="tab" data-toggle="tab" href="#form-login">
                    Login
                </a>
            </li>
                <li class="nav-item">
                    <a class="nav-link register-link" id="form-register-top" role="tab" data-toggle="tab" href="#form-register">
                        Register
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link continue-without-register-link" id="form-guest-top" role="tab" data-toggle="tab" href="#form-guest">
                        Continue without an account
                    </a>
                </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="tab-content">
            <div id="form-login" class="tab-pane fade show active" role="tabpanel" aria-labelledby="form-login-top">
                {include file="inc/shared/my-account/login-form.html"}
            </div>
                <div id="form-register" class="tab-pane fade" role="tabpanel" aria-labelledby="form-register-top">
                    {include file="inc/shared/register/form.html"}
                </div>
                <div id="form-guest" class="tab-pane fade" role="tabpanel" aria-labelledby="form-guest-top">
                    {include file="inc/shared/cart/step2/guest/form.html"}
                </div>
        </div>
    </div>
</div>

具有以下内容：单击前两个选项卡工作正常，它们按预期切换，但点击导航时的第三个选项卡开始打破其余选项。

fade类从面板消失
转换中断
切换到另一个

我已经通过w3验证器运行页面来检查可能的id冲突，但它通过0消息解析了

我还要注意，标签中显示的部分也有自己的标签

Answer 1

以下代码没问题，bootstrap 4.0.0-beta1中有一个错误，但升级到bootstrap 4.0.0-beta2解决了这个问题。

Bootstrap 4选项卡在有2个选项卡时可以正常工作，但与3分开

1 个答案: