目前,当您在Bootstrap 3中设置选项卡时,选项卡不响应.
这个：
变成这样：
CSS.修复它的外观很容易,只需删除最大宽度的浮动等.但是,该内容与选项卡不相交,因此一堆标签将像标签一样工作,但在较小的视口上,您可能看到或可能看不到内容的更改.
这是制作标签式导航的基本HTML：
<!--begin tabs going in wide content -->
<ul class="nav nav-tabs" id="maincontent" 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 class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul><!--/.nav-tabs.content-tabs -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Home Content : ...</p>
</div><!--/.tab-pane -->
<div class="tab-pane fade" id="profile">
<p>Profile Content : ...</p>
</div><!--/.tab-pane -->
<div class="tab-pane fade" id="dropdown1">
<p>Dropdown1 - ...</p>
</div><!--/.tab-pane -->
<div class="tab-pane fade" id="dropdown2">
<p>Dropdown 2 - ...</p>
</div><!--/.tab-pane -->
</div><!--/.tab-content -->
如何将标签转换成手风琴或折叠,使其小视口友好？
解决方法
Bootstrap选项卡不响应开箱即用.响应型,IMO,是风格的变化,功能的变化是自适应的.有几个插件将引导3选项卡转换为折叠组件.最好的和最新的是：
https://github.com/flatlogic/bootstrap-tabcollapse.
这是实现它的一种方法：
编辑：http://jsbin.com/zibani/1/edit
这会将内容转换为折叠组件：
依赖关系：
> Bootstrap 3.2 css或更高,但仍在3系列
Bootstrap 3.2 jQuery或更高版本,但仍然在3系列中
>兼容版本的bootstrap-tabcollapse.js
HTML – 与类名称相关的问题相同：
<ul class="nav nav-tabs content-tabs" id="maincontent" role="tablist">
jQuery的：
$(document).ready(function() {
// DEPENDENCY: https://github.com/flatlogic/bootstrap-tabcollapse
$('.content-tabs').tabCollapse();
// initialize tab function
$('.nav-tabs a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
});
CSS – 可选的胖手指和活动状态：
.panel-heading {
padding: 0
}
.panel-heading a {
display: block;
padding: 20px 10px;
}
.panel-heading a.collapsed {
background: #fff
}
.panel-heading a {
background: #f7f7f7;
border-radius: 5px;
}
.panel-heading a:after {
content: '-'
}
.panel-heading a.collapsed:after {
content: '+'
}
.nav.nav-tabs li a,.nav.nav-tabs li.active > a:hover,.nav.nav-tabs li.active > a:active,.nav.nav-tabs li.active > a:focus {
border-bottom-width: 0px;
outline: none;
}
.nav.nav-tabs li a {
padding-top: 20px;
padding-bottom: 20px;
}
.tab-pane {
background: #fff;
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
