Bootstrap 5 选项卡在 577px 及以下的屏幕尺寸上没有变化

Question

我可以在较大的设备上切换选项卡，但在较小的设备上，它不起作用。控制台中也没有错误。该选项卡还包含在一个 z-index 为 -1 的 div 中。我需要它的 z-index 为 -1，这样当我向上滚动时它会位于另一个 div 下。如果我从包装器中删除 z-index，我可以单击选项卡。

我无法将更高的 z-index 添加到我希望这些选项卡项在其下滚动的 div，因为导航栏的下拉列表将隐藏在它后面。

<ul class="nav nav-tabs innerTab" id="profileTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button"
            role="tab" aria-controls="personal" aria-selected="true">Personal Information</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button"
            role="tab" aria-controls="account" aria-selected="false">Account
            Information</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="kyc-tab" data-bs-toggle="tab" data-bs-target="#kyc" type="button" role="tab"
            aria-controls="kyc" aria-selected="false">
            Documents</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button"
            role="tab" aria-controls="password" aria-selected="false">Password change</button>
    </li>
</ul>

<div class="tab-content" id="profileTabContent">
    <div class="tab-pane show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
        P
    </div>
    <div class="tab-pane" id="account" role="tabpanel" aria-labelledby="account-tab">
        A
    </div>
    <div class="tab-pane" id="kyc" role="tabpanel" aria-labelledby="kyc-tab">K
    </div>
    <div class="tab-pane" id="password" role="tabpanel" aria-labelledby="password-tab">P
    </div>
</div>

Answer 1

您是否尝试过将容器包装或更改为“标签”，可能需要添加它们 display: block;并删除一些填充/边距以保持您的布局