移动设备中的引导响应式布局转换为选项卡

Question

正如标题所示，我目前正在使用 Bootstrap。我正在开发一个响应式布局，它在桌面大小中只是一个普通的柱状浮动布局。然后在移动设备或平板电脑大小中，它添加引导选项卡。我不太确定如何解决这个问题，因为 bootstrap 3 col-xs 浮点数似乎与 tabs 插件不兼容。我做了一个图表来帮助解释。

我一直在使用小提琴jsfiddle

<div class="container">   
<div class="content">
    <ul class="nav nav-tabs visible-phone">
        <li class="active"><a href="#t1" data-toggle="tab">T1</a></li>
        <li><a href="#t2" data-toggle="tab">T2</a></li>
        <li><a href="#t3" data-toggle="tab">T3</a></li>
    </ul>

    <div class="row tab-content">
        <div class="col-sm-4 tab-pane active" id="enter">
            <div class="inner-right-border">
                <h2>T1 CONTENT</h2>
                <hr />
            </div>
        </div>
        <div class="col-sm-8">
            <div class="tab-pane" id="t2">
                <h2>T2 CONTENT</h2><hr />
            </div>
            <div class="tab-pane" id="t3">
                <h2>T3 CONTENT</h2><hr />
            </div>
        </div>
    </div>
</div>                

提前感谢您的帮助！

Answer 1

需要类似的东西

HTML：

<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs device-small" 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>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active col col-xs-12 col-sm-4" id="home">...home...</div>
        <div role="tabpanel" class="tab-pane col-xs-12 col-sm-4" id="profile">...profile...</div>
        <div role="tabpanel" class="tab-pane col-xs-12 col-sm-4" id="messages">...messages...</div>
    </div>

</div>

CSS：

/* small device */
@media (max-width: 767px) {
    .device-big {
        display: none;
    }
    .device-small {
        display: block;
    }
}
/* big device */
@media only screen and (min-width : 768px) {
    .device-big, .tab-content > .tab-pane {
        display: block;
    }
    .device-small {
        display: none;
    }
    .tab-content > .tab-pane {
        display: block;
    }
}

这是工作示例：http://jsfiddle.net/bomff3g6/

Answer 2

上面的 CSS 代码有效，但嵌套选项卡存在问题。例如，从最初的 - 未来选项卡开始，然后包含 2 个选项卡。

我想将此作为对 Atul 回复的评论发布，但没有足够的“声誉”积分。

这是一个允许嵌套标签的细微调整。

@media (max-width: 767px) {
  .device-big {
    display: none;
  }
  .device-small {
    display: block;
  }
}
/* big device */
@media only screen and (min-width : 768px) {
  .tab-content > .tab-pane.device-big {
    display: block;
  }
  .device-small {
    display: none;
  }
}

Answer 3

工作 jsfiddle：https://jsfiddle.net/41s795qn/

来自 Atul Yadav 回答的更新引导 v4 版本：

<div class="container-fluid">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs hidden-md-up" role="tablist">
        <li class="nav-item"><a class="nav-link active" href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
        <li class="nav-item"><a class="nav-link" href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content row">
        <div role="tabpanel" class="tab-pane active col col-12 col-md-4" id="home">...home...</div>
        <div role="tabpanel" class="tab-pane col-12 col-md-4" id="profile">...profile...</div>
        <div role="tabpanel" class="tab-pane col-12 col-md-4" id="messages">...messages...</div>
    </div>
</div>

CSS：

/* big device */
@media(min-width : 768px) {
    .tab-content > .tab-pane {
        display: block;
    }
}

Answer 4

tab 插件不能与 bootstrap 的列类一起正常工作。您可以在桌面上使用列类，在桌面上使用媒体查询隐藏选项卡组件。然后在移动设备上显示标签并隐藏列。