在移动视图中将引导选项卡切换到下拉菜单

Question

我有一个使用 Bootsrtap 3 开发的网站，那里有标签元素。从移动设备浏览时，我必须将选项卡式项目设置为下拉菜单。有可能吗？

<!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
      <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade in active" id="home">A</div>
      <div class="tab-pane fade" id="profile">B</div>
      <div class="tab-pane fade" id="messages">C</div>
      <div class="tab-pane fade" id="settings">D</div>
    </div>

我正在使用带有引导程序的基本选项卡。

Answer 1

以下 css 将基本设计应用于 device-width >=480px 的设备的选项卡。您可以更改此限制宽度以获得更高的手机分辨率：

@media screen and (max-width: 480px) {
    .nav {
        padding-left:2px;
        padding-right:2px;
    }
    .nav li {
        display:block !important;
        width:100%;
        margin:0px;
    }
    .nav li.active {
        border-bottom:1px solid #ddd!important;
        margin: 0px;
    }
}

http://jsfiddle.net/e7mzx24v/

希望对你有帮助

Answer 2

我是不小心来到这里的，但是看了答案，看到很多人都在寻找它，我发布了这个答案。 事实上，有一种简单的方法可以做到这一点。

您可以使用引导原生类“visible-xs”和“hidden-xs”，这将根据用户打开页面的设备自动隐藏或显示两个控件之一。

这里给出一个例子：

<div class="tabbable">
    <ul class="mb10 nav nav-pills nav-justified form-tabs hidden-xs">
       <li class="tab-selector active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
       <li class="tab-selector"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
       <li class="tab-selector"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
       <li class="tab-selector"><a href="#tab4" data-toggle="tab">Tab 4</a></li>
       <li class="tab-selector"><a href="#tab5" data-toggle="tab">Tab 5</a></li>
    </ul>
    <select class="mb10 form-control visible-xs" id="tab_selector">
        <option value="0">Tab 1</option>
        <option value="1">Tab 2</option>
        <option value="2">Tab 3</option>
        <option value="3">Tab 4</option>
        <option value="4">Tab 5</option>
    </select>
    <div class="tab-content">
       <div class="tab-pane active" id="tab1">
            Content tab 1
       </div>
       <div class="tab-pane" id="tab2">
            Content tab 2
       </div>
       <div class="tab-pane" id="tab3">
            Content tab 3
       </div>
       <div class="tab-pane" id="tab4">
            Content tab 4
       </div>
       <div class="tab-pane" id="tab5">
            Content tab 5
       </div>
    </div>
</div>

将此 javascript sn-p 放在文档就绪函数中”并将其放在 </body> 标记的末尾以及 </body> 标记中，而不是在它之外。当然，您必须启动并运行 jQuery。

$(document).ready(function() {
    $('#tab_selector').on('change', function (e) {
        $('.form-tabs li a').eq($(this).val()).tab('show');
    });
});

可以在此处找到工作演示：https://jsfiddle.net/fr0w59n9/