Tabs 引导4标签到手风琴。如何？

我在谷歌上搜索了一下，在这里找到了如何将bootstrap3标签转换成手风琴，但我使用的是bootstrap4，我不知道如何将它转换成bootstrap4标签转换成手风琴。请帮帮我

谢谢

如评论中所述，原始答复是为以下目的编写的。发布的Bootstrap4版本需要对标记/css进行两次更改。因此进行了更新

在Bootstrap 4中，您可以通过以下标记实现该功能。
（当涉及css@media查询时，由于内置的代码片段查看器有时会把事情弄混，所以我也创建了一个示例。）

与BS 4 Beta 2相比，需要进行以下两项更改：

• 首先，选项卡的隐藏方式发生了变化：早期的

  。选项卡窗格的不透明度由
  .fade
  类管理，但在发布的verion中，它是
  .fade:not（.show）
  选择器，具有更高的优先级。因此，要覆盖不透明度
  。选项卡窗格
  需要在css中更改为
  。选项卡内容>。选项卡窗格

• 第二，对可折叠组的处理也发生了变化。以前，切换按钮需要

  数据父项

  属性。但是，由于发布版本

  数据父级

  需要进入可折叠元素

引导程序4.1.3的更新代码如下：

HTML

Bootstrap 4 Beta 2的原始答案：

.nav选项卡{
显示：无；
}
@介质（最小宽度：768px）{
.导航标签{
显示器：flex；
}
.卡片{
边界：无；
}
.卡.卡头{
显示：无；
}  
.卡.折叠{
显示：块；
}
}
@介质（最大宽度：767px）{
.选项卡窗格{
显示：块！重要；
不透明度：1；
}
}

[选项卡内容A]
[选项卡内容B]
[选项卡内容C]

我使用jquery将这个引导4选项卡设置为accordion。。。。我希望它能起作用：）

---

当前的Bootstrap 4版本建议将

数据父级

放在折叠容器上

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

[选项卡内容A]
[选项卡内容B]
[选项卡内容C]

---

放置代码-你的链接被SO阻止。

数据父项

现在应该在折叠容器上。@TimVermaelen你是什么意思？我看你是对的（即此标记不再适用于bootstrap v4.1.3），但我已经像疯子一样移动了

数据父项

，它们仍然消失（在手机中时）我遗漏了什么？@TimVermaelen例如：把这个缩小到mobile，看看bug@dferenc是你原来的4.0.0测试版。。（仅适用于4.0.0）此处的I版链接为4.1.3（不起作用）@TimVermaelen感谢您的提示！虽然

数据父项中的更改确实很重要，但首先是css中的更改导致OP过时。仅供参考，这项工作做得很好，但有两个小错误1）如果您选择大的选项卡C（[tab content C]）或选项卡B（[tab content B]），则会缩小手风琴标题A（和或标题C）的大小，另外，当您在任一模式下选择“选项卡”或“手风琴”时，所选内容不会以调整大小的模式保留在显示的手风琴/选项卡中。谢谢。明天我将把它们与我上次的集成进行比较。应该可以仅使用数据属性对其进行排序。或者今天的^^问题与CSS相关。请注意已更改的选择器
.tab content.tab窗格
。
<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>

.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` in order 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;
    }
}

function tabToAccordion(){
    var navTab = $(".nav-tabs"),
        tabContent = $(".tab-content");
        // hiding the navtabs
    navTab.hide();
    // appending each link to respective tab-pane
        navTab.find("li").each(function(){
            var destination = $($(this).find(".nav-link").attr("href"));
            var anchor = $(this).find(".nav-link");
            // removing unused attributes and adding tabContent-toggler class
            anchor.removeAttr("data-toggle role aria-controls aria-selected").addClass("tabContent-toggler").insertBefore(destination);
        });
    var tabToggler = $('.tabContent-toggler'),
    tabPane = tabContent.find(".tab-pane"),
    // get all classes in tab pane for further usage and replace tab-pane with empty data
    nonActiveTabPane = tabContent.find(".tab-pane:not(.active)").attr("class");
    tabPaneClass = tabPane.attr('class');
    tabPaneClass = tabPaneClass.replace(nonActiveTabPane,"");
    tabToggler.click(function(e){
        // get the destination of clicked element
        var destination = $($(this).attr("href"));
        // if not this element then remove active class
        $(this).parent().find(tabToggler).not($(this)).removeClass("active");
        //if not clicked destination then remove all other class except tab-pane
        $(this).parent().find('.tab-pane').removeClass(tabPaneClass);
        // now toggle active class
        $(this).toggleClass("active");
        // also toggle all other class in tab-pane
        destination.toggleClass(tabPaneClass);
        // if this element dont have active class then remove all other class from tab-pane
        if(!$(this).hasClass("active")){
            destination.removeClass(tabPaneClass);
        }
        // first element of nested tab-pane should be active
        if(destination.has(tabToggler)){
            var tabTogglerFirstChild = destination.find(".tabContent-toggler:first-child"),
            tabTogglerFirstDestination = $(tabTogglerFirstChild.attr("href"));
            tabTogglerFirstChild.addClass("active");
            tabTogglerFirstDestination.addClass(tabPaneClass);
        }
        // preventing default behaviour of element
        e.preventDefault();
    });
}
// check if device is mobile and if so only run the function
if(/Mobi/.test(navigator.userAgent)){
    tabToAccordion();
}

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