小编osm*_*rgs的帖子

Bootstrap 3中的堆叠标签

我正在尝试使用Bootstrap 3中的Tab jquery插件实现左对齐堆叠选项卡,其中选项卡垂直呈现在选项卡内容的左侧,而不是顶部.当我尝试以下时;

   <ul class="nav nav-tabs nav-stacked">
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>


    <div class="tab-content">
        <div class="tab-pane fade" id="tab1">
            Tab 1 content
        </div>
        <div class="tab-pane fade" id="tab2">
            Tab 2 content              
        </div>
        <div class="tab-pane fade" id="tab3">
            Tab 3 content
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

标签堆叠在彼此之上,但没有正确地呈现为向左转,而是它们只是水平标签粘在彼此之上.标签内容在内容div中正确显示/隐藏.

这是在Bootstrap 2.x中使用tab-lefttab-right类处理的,但这在Bootstrap 3中已被弃用,并且似乎没有被任何东西替换.有谁知道Bootstrap 3 Tab插件中是否可以进行正确的左右选项卡渲染?

tabs twitter-bootstrap twitter-bootstrap-3

154
推荐指数
4
解决办法
22万
查看次数