引导选项卡作为移动选项卡答案

【问题标题】：bootstrap tab as tab for mobile引导选项卡作为移动选项卡
【发布时间】：2014-07-18 01:01:45
【问题描述】：

我正在为移动设备设计一个引导标签。但问题是，在桌面浏览器中，选项卡还可以，但是当它更改为移动屏幕尺寸时，选项卡会一个接一个。由于响应能力，它会自动调整。但我希望它在移动设备中也能以标签形式呈现。

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>

这是http://jsfiddle.net/LdWUV/的小提琴

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

您现在无能为力，只能编写自己的 javascript 或服务器端代码。这个问题在 GitHub 9048、10688、7540 上讨论了很多次（仅作为示例），但引导团队不会听取任何人的意见，也不想对选项卡插件做任何事情。我建议你在 GitHub 上打开新的 issue 以引起更多的关注。

【讨论】：

【解决方案2】：

这就是我正在做的：

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

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

【讨论】：