Javascript 引导选项卡作为移动设备的选项卡

我正在为手机设计一个引导标签。但问题是，在桌面浏览器中，选项卡是可以的，但当它改变为移动屏幕大小时，选项卡会一个接一个地出现。它会根据响应能力自动调整。但我希望它在手机中也能以标签的形式出现

html是：

<section class="panel">
                <header class="panel-heading bg-light">
                  <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#profile" data-toggle="tab">Profile</a></li>
                    <li><a href="#messages" data-toggle="tab">Messages</a></li>
                  </ul>
                </header>
                <div class="panel-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="home">home</div>
                    <div class="tab-pane" id="profile">profile</div>
                    <div class="tab-pane" id="messages">message</div>
                  </div>
                </div>
              </section>

家
轮廓
消息

这是我的小提琴

---

如何实现这一点？

现在除了编写自己的javascript或服务器端代码之外，您什么也做不了。这个问题在GitHub上讨论了很多次（仅举个例子），但bootstrap团队不会听取任何人的意见，也不想对tab plugin做任何事情。我建议您在GitHub上打开新的问题，以引起对这个问题的更多关注。

这就是我正在做的：

@media only screen and (max-width: 767px) 
{
    .nav-tabs li
    {
        width:100%!important;
    }
    .tab-content .tab-pane
    {
       display:block!important; 
    }
}

如果您不希望所有的选项卡窗格在移动设备上都可见，只需去掉第二个块中的选项卡窗格css即可。我还包括一些仅在xs上可见的头文件，这些头文件使块更容易区分。这几乎可以创建标签标题，作为移动内容的锚定链接