Question

使用Bootstrap的Togglable Tabs如果以较小的屏幕尺寸（最大768px）观看，我想显示成手风琴 - 很像Bootstrap手风琴（但不必具有滑动效果）。

<div role="tabpanel" id="tabs-test">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                <div role="tabpanel" class="tab-pane" id="profile">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div role="tabpanel" class="tab-pane" id="messages">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                <div role="tabpanel" class="tab-pane" id="settings">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
              </div>
            </div>
            <!-- /tabpanel -->

请参见小提琴 - https://jsfiddle.net/DTcHh/5685/

为此，我需要在每个相应的标签下方显示活动标签的内容。

即。在较小的尺寸上，我需要<div tab-content>移动到具有活动类的<ul nav-tabs>内的<li>，并且仅显示具有类的<div tab-pane>活性。对于每个活动的折叠式选项卡，标记现在应该看起来像这样 -

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>

              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
              </div>

    </li>
</ul>

然后我可以使用窗口调整大小功能使用下面的条件代码，只显示我需要的大小。

$(window).resize(function () {
        if ($(this).width() <= 768) {

        }
        else {

        }
    });

非常感谢任何帮助！

Bootstrap Togglable Tabs为非桌面尺寸的手风琴

0 个答案: