twitter-bootstrap 在移动视图中将 Bootstrap 选项卡切换到下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25599777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Bootstrap Tabs to Dropdown in Mobile view
提问by Shafeeque Shaz
I have a website developing with Bootsrtap 3, I have tab element there. I have to make tabbed items as drop downs when browsing from mobile deveice. Is it possible?
我有一个使用 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>
I am using the basic Tabs with the bootstrap.
我正在使用带有引导程序的基本选项卡。
回答by Yooz
The following css applies a basic design to the tabs for devices where device-width >=480px. You can change this limit width for higher phone resolution :
以下 css 将基本设计应用于设备宽度 >=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;
}
}
Hope it helps
希望能帮助到你
回答by Franco
I came here by mistake, but having had a look at the answers, and seen that many people are looking for it, I have posted this answer. There is, in fact, an easy way to do all that.
我是错误地来到这里，但看了答案，看到很多人都在寻找它，我发布了这个答案。事实上，有一种简单的方法可以做到这一切。
You can use the bootstrap native classes 'visible-xs' and 'hidden-xs', this will automatically hide or show one of the two controls depending with which device the users are opening the page.
您可以使用引导本机类“visible-xs”和“hidden-xs”，这将根据用户打开页面的设备自动隐藏或显示两个控件之一。
An example is given here:
这里给出了一个例子：
<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>
Place this javascript snippet in the document ready function" and put it at the end of </body>tag and well in the </body>tag and NOT outside of it. Of course you must have jQuery up and running.
将此 javascript 代码片段放在文档就绪函数中”并将其放在</body>标签的末尾，并在</body>标签内而不是在标签外。当然，您必须启动并运行 jQuery。
$(document).ready(function() {
$('#tab_selector').on('change', function (e) {
$('.form-tabs li a').eq($(this).val()).tab('show');
});
});
A working demo can be found here: https://jsfiddle.net/fr0w59n9/
可以在此处找到工作演示：https: //jsfiddle.net/fr0w59n9/
回答by Prashanth Ramakrishnan
I know it is very late to answer this question, but check this out:
我知道现在回答这个问题为时已晚，但请查看以下内容：
http://www.jqueryscript.net/layout/Mobile-Friendly-Bootstrap-Tabs-Enhancement-with-jQuery.html
http://www.jqueryscript.net/layout/Mobile-Friendly-Bootstrap-Tabs-Enhancement-with-jQuery.html
It is a wonderful implementation!
这是一个美妙的实现！
