Question

我用谷歌搜索并找到了如何在响应式Bootstrap 3 tab to accordion中使用Bootstrap 3选项卡进行手风琴，但我使用的是Bootstrap 4而且我不知道如何将其转换为Bootstrap 4选项卡到手风琴。请帮帮我。

谢谢！

Answer 1

如评论中所示，原始答案是为Bootsrap 4 Beta 2撰写的。发布的Bootstrap 4版本需要在标记/ css中进行两处更改。因此更新。

在Bootstrap 4中，您可以使用以下标记实现该功能（由于内置的代码段查看器在涉及css @media查询时有时会混淆，我也创建了Codepen。）

与BS 4 Beta 2相比，有两个必要的变化：

首先，隐藏了标签的隐藏方式：早期的.tab-pane 不透明度由.fade类管理，但在已发布的版本中，它是{{ 1}}选择器，具有更高的优先级。因此，要覆盖需要在css中更改为.fade:not(.show)的不透明度 .tab-pane。
其次，可折叠组的处理也会发生变化。以前是切换按钮，需要.tab-content > .tab-pane属性。但是，由于发布版本data-parent需要进入可折叠元素。

Bootstrap 4.1.3 的更新代码如下：

HTML

data-parent

CSS

<div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
        </li>
    </ul>


    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
            <div class="card-header" role="tab" id="heading-A">
                <h5 class="mb-0">
                    <!-- Note: `data-parent` removed from here -->
                    <a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
                        Collapsible Group Item A
                    </a>
                </h5>
            </div>

            <!-- Note: New place of `data-parent` -->
            <div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
                <div class="card-body">
                    [Tab content A]
                </div>
            </div>
        </div>

        <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
            <div class="card-header" role="tab" id="heading-B">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
                        Collapsible Group Item B
                    </a>
                </h5>
            </div>
            <div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
                <div class="card-body">
                    [Tab content B]
                </div>
            </div>
        </div>

        <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
            <div class="card-header" role="tab" id="heading-C">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
                        Collapsible Group Item C
                    </a>
                </h5>
            </div>
            <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
                <div class="card-body">
                    [Tab content C]
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 4 Beta 2的原始答案：
Codepen

.nav-tabs {
    display:none;
}

@media(min-width:768px) {
    .nav-tabs {
        display: flex;
    }

    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
}

@media(max-width:767px){
    /*
     * Changed selector to `.tab-content > .tab-pane` to override `.fade:not(.show)`
     * In BS4 Beta `.tab-pane`s were rendered hidden by just `.fade`
     */
    .tab-content > .tab-pane { {
        display: block;
        opacity: 1;
    }
}

.nav-tabs {
    display:none;
}

@media(min-width:768px) {
    .nav-tabs {
        display: flex;
    }

    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
}

@media(max-width:767px){
    .tab-pane {
        display: block !important;
        opacity: 1;
    }
}

Answer 2

当前的Bootstrap 4版本建议将data-parent放在折叠容器上。

要将类似手风琴的组管理添加到可折叠区域，请添加数据属性data-parent =“＃selector”。

<div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
        </li>
    </ul>

    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
        <div class="card-header" role="tab" id="heading-A">
            <h5 class="mb-0"><a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">Collapsible Group Item A</a></h5>
        </div>
        <div id="collapse-A" class="collapse show" role="tabpanel" data-parent="#content" aria-labelledby="heading-A">
           <div class="card-body">[Tab content A]</div>
        </div>
    </div>

    <div id="pane-B" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-B">
        <div class="card-header" role="tab" id="heading-B">
            <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">Collapsible Group Item B</a></h5>
        </div>
        <div id="collapse-B" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-B">
            <div class="card-body">[Tab content B]</div>
        </div>
    </div>

    <div id="pane-C" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-C">
        <div class="card-header" role="tab" id="heading-C">
            <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">           Collapsible Group Item C</a></h5>
        </div>
        <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
            <div class="card-body">[Tab content C]</div>
        </div>
    </div>
</div>

https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes

DEMO

Answer 3

我使用jquery制作了这个bootstrap 4 tab to accordion ....我希望它有效：）

BreadCrumbAjaxLink

Bootstrap 4 Tab to Accordion。如何？

3 个答案: