BootStrap4 Tab 遇到的一个问题

最新推荐文章于 2024-08-20 11:50:43 发布

月半叫做胖

最新推荐文章于 2024-08-20 11:50:43 发布

阅读量1.1k

点赞数

分类专栏：前端学习常见问题文章标签： BootStrap Nav Tab

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

版权

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

摘要由CSDN通过智能技术生成

        <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>

这段代码无法实现t