使 Bootstrap 3 标签响应 [英] Make Bootstrap 3 Tabs Responsive

问题描述

目前，当您在 Bootstrap 3 中设置标签时，标签没有响应.

Currently, when you set up tabs in Bootstrap 3, the tabs are not responsive.

这个:

变成这样:

CSS.修复它的外观很容易，只需在最大宽度处删除浮动等.但是，内容与选项卡脱节，因此一堆选项卡将像选项卡一样工作，但在较小的视口上，您可能会也可能不会看到内容的变化.

这是制作标签式导航的基本html:

This is the basic html for making a tabbed navigation:

      <!--begin tabs going in wide content -->
       <ul class="nav nav-tabs" id="maincontent" role="tablist">
          <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li class="dropdown">
             <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
             </ul>
          </li>
       </ul><!--/.nav-tabs.content-tabs -->


       <div class="tab-content">

          <div class="tab-pane fade in active" id="home">
             <p>Home Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="profile">
             <p>Profile Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown1">
             <p>Dropdown1 - ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown2">
             <p>Dropdown 2 - ...</p>
          </div><!--/.tab-pane -->

       </div><!--/.tab-content -->

你如何将选项卡变成手风琴或折叠以便它对小视口友好?

推荐答案

Bootstrap 选项卡在开箱即用时没有响应.Responsive，IMO，是一种风格变化，变化的功能是Adaptive.有几个插件可以将 Bootstrap 3 选项卡转换为折叠组件.最好和最新的一个是:https://github.com/flatlogic/bootstrap-tabcollapse.

Bootstrap tabs are not responsive out of the box. Responsive, IMO, is a style change, changing functions is Adaptive. There are a few plugins to turn the Bootstrap 3 tabs into a Collapse component. The best and most updated one is : https://github.com/flatlogic/bootstrap-tabcollapse.

这是实现它的一种方式:

Here's one way of implementing it:

这会将内容变成折叠组件:

This turns the content into a collapse component:

依赖关系:

1. Bootstrap 3.2 css 或更高版本，但仍在 3 系列中
2. Bootstrap 3.2 jQuery 或更高版本但仍在 3 系列中
3. 兼容版本的 bootstrap-tabcollapse.js

HTML -- 与添加类名的问题相同:

       <ul class="nav nav-tabs content-tabs" id="maincontent" role="tablist">

jQuery:

$(document).ready(function() {

    // DEPENDENCY: https://github.com/flatlogic/bootstrap-tabcollapse
    $('.content-tabs').tabCollapse();

    // initialize tab function
    $('.nav-tabs a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });

});

CSS -- 适用于胖手指和活动状态:

.panel-heading {
    padding: 0
}
.panel-heading a {
    display: block;
    padding: 20px 10px;
}
.panel-heading a.collapsed {
    background: #fff
}
.panel-heading a {
    background: #f7f7f7;
    border-radius: 5px;
}
.panel-heading a:after {
    content: '-'
}
.panel-heading a.collapsed:after {
    content: '+'
}
.nav.nav-tabs li a,
.nav.nav-tabs li.active > a:hover,
.nav.nav-tabs li.active > a:active,
.nav.nav-tabs li.active > a:focus {
    border-bottom-width: 0px;
    outline: none;
}
.nav.nav-tabs li a {
    padding-top: 20px;
    padding-bottom: 20px;
}
.tab-pane {
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: -1px;
}

这篇关于使 Bootstrap 3 标签响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！