将引导选项卡栏转换为移动大小的手风琴菜单

Question

有没有办法在不添加插件的情况下将引导选项卡栏转换为移动大小的手风琴？

引导垂直选项卡的示例：http://www.bootply.com/74926

Answer 1

此代码将帮助其正常工作 只需添加 BootStrap 和 Jquery 文件的 CDNS 即可

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Tabs</h3>
            <!-- tabs -->
            <div class="tabbable" id="accordion">
                <ul class="nav nav-tabs">
                    <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a></li>
                    <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a></li>
                    <!--<li><a href="#twee" data-toggle="collapse" data-parent="#accordion" data-target="#twee">Twee</a></li>-->
                </ul>

                <div class="panel panel-default">
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                </div>
            </div>
            <!-- /tabs -->
        </div>
    </div><!-- /row -->
</div>