Question

我正在为移动设计一个引导标签。但问题是，在桌面浏览器中，选项卡是正常的，但当它更改为移动屏幕大小时，选项卡会在另一个之下。它会因响应性而自动调整。但是我希望它能够在移动设备中以标签形式响应。

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/

的小提琴

我怎样才能做到这一点？

Answer 1

您现在无法做任何事情，但可以编写自己的javascript或服务器端代码。很多时候在GitHub 9048，10688，7540（仅举例）上讨论过这个问题，但是bootstrap团队不会听到任何人的意见，也不想做任何事情使用选项卡插件。我建议你在GitHub上打开新的问题，以便更多地关注这个问题。

Answer 2

这就是我正在做的事情：

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

如果您不想在移动设备上看到所有标签窗格，只需删除第二个块中的标签窗格css即可。我还包括了一些仅在xs上可见的标题，这些标题使得块更易于区分。这几乎创建了标签标题，作为移动内容的锚链接。

bootstrap选项卡作为移动设备的选项卡

2 个答案: