Bootstrap 5响应式布局问题：大屏下文本内容显示异常

问题核心：大屏下文本区域被Bootstrap标签组件的.tab-pane默认隐藏逻辑限制，只有带.active类的面板才会显示，但大屏下标签栏是隐藏状态，无法切换激活状态，导致文本无法正常展示。

解决步骤 #

• 针对大屏设备，强制文本区域始终显示，脱离标签组件的激活状态控制
• 保留小屏设备的标签切换交互功能

修改后的代码示例 #

<main class="container">
    <div class="row">
        <aside class="d-none d-lg-block col-lg-4">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th colspan="2">My Car</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Year</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Make</td>
                        <td>Honda</td>
                    </tr>
                    <tr>
                        <td>Model</td>
                        <td>Civic</td>
                    </tr>
                </tbody>
            </table>
        </aside>
        <div class="col ps-md-4">
            <div class="d-lg-none">
                <ul class="nav nav-tabs mt-5">
                    <li class="nav-item">
                        <a class="nav-link active" href="#table" data-bs-toggle="tab">Table</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#text" data-bs-toggle="tab">Text</a>
                    </li>
                </ul>
            </div>

            <div class="tab-content">
                <div class="d-lg-none tab-pane fade show active tab-container" id="table">
                    <!-- 小屏专属表格 -->
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th colspan="2">My Car</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Year</td>
                                <td>2023</td>
                            </tr>
                            <tr>
                                <td>Make</td>
                                <td>Honda</td>
                            </tr>
                            <tr>
                                <td>Model</td>
                                <td>Civic</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 关键修改：添加d-lg-block类确保大屏强制显示 -->
                <div class="tab-pane fade show tab-container d-lg-block" id="text">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel massa laoreet, tristique est eget, pulvinar lacus. Nam nec diam at diam elementum porttitor ac ac sapien. Quisque ut consectetur magna. Suspendisse vestibulum magna mollis, elementum justo at, aliquet lorem. Etiam auctor nisi vitae efficitur sagittis. Morbi dui sem, consectetur vel fermentum sit amet, sollicitudin eget lectus. Mauris malesuada faucibus diam, in condimentum risus lacinia finibus. Aliquam porta ornare lacus, a blandit dolor interdum vel. </p>
                </div>
            </div>
        </div>
    </div>
</main>

兜底CSS方案（若上述类不生效） #

如果大屏下文本仍被隐藏，添加自定义CSS强制覆盖标签组件的隐藏样式：

@media (min-width: 992px) {
    #text.tab-pane {
        display: block !important;
        opacity: 1;
    }
}

原理说明 #

1. d-lg-block类在大屏（≥992px）时强制元素为块级显示，直接覆盖.tab-pane的默认隐藏逻辑
2. 小屏设备下，d-lg-block不生效，标签组件的切换逻辑不受影响
3. 自定义CSS作为兜底方案，确保大屏下文本区域的显示属性完全脱离标签组件的状态控制

内容的提问来源于stack exchange，提问作者PixelPaul