BootStrap4 Tab 遇到的一个问题_bootstrap 4.6+ 不兼容tab组件-CSDN博客

本文链接：https://blog.csdn.net/qq_24724109/article/details/87714804

在BootStrap4中遇到Tab功能失效的问题，原因在于tab1和tab2与某些组件存在冲突。通过代码调整，解决了这个问题并展示了如何创建一个竖向排列的Tab形式，利用row和col的12列布局确保tab-content的宽度适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <div class="container">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tab1" >tab1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab2" >tab2</a>
                </li>
            </ul>
            <div class="tab-content py-3">
                <div id="tab1" class="tab-pane active" role="tabpanel">tab1 信息</div>
                <div id="tab2" class="tab-pane" role="tabpanel">tab2 信息</div>
            </div>
        </div>

这段代码无法实现tab的功能分析的原因是tab1 和tab2和组件中的某些冲突，更改如下

        <div class="container">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tab-first" >tab1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-second" >tab2</a>
                </li>
            </ul>
            <div class="tab-content py-3">
                <div id="tab-first" class="tab-pane active" role="tabpanel">tab1 信息</div>
                <div id="tab-second" class="tab-pane" role="tabpanel">tab2 信息</div>
            </div>
        </div>

现在即可使用

另保存一个竖tab的形式

        <h2 class="text-center">Tab</h2>

        <div class="container row">
            <ul class="nav nav-pills flex-column col-2">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tab-first" >tab1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-second" >tab2</a>
                </li>
            </ul>
            <div class="tab-content py-3 col-10">
                <div id="tab-first" class="tab-pane active" role="tabpanel">tab1 信息</div>
                <div id="tab-second" class="tab-pane" role="tabpanel">tab2 信息</div>
            </div>
        </div>

这里通过row将元素设置在一行中，然后用col的12列布局来设定tab-content的宽度