Bootstrap 3.x nav-tabs的响应问题

Question

我有一个bootstrap组件nav-tabs，当页面宽度大于行所需的时候（bootstrap .row div），它正常工作。 问题在于，当我更改移动设备的视图时，响应式设计的行为不正常，并且标签未对齐。 请参阅下面链接中的代码，页面宽度减小的程度，公司，支持和设计选项卡的行为都很奇怪。

http://www.bootply.com/Ym1iDjaBjz#

Answer 1

这是正常的，因为所有标签都没有足够的空间。

您可以减少.nav-tabs li a处的填充以创建空间或添加以下规则以使其以100％宽度显示。

.nav-tabs > li, .nav-tabs li a { display: inline-block; width: 100%; }
.nav-tabs li a { border: 1px solid #ddd; }

祝你好运！

Answer 2

我在类似情况下使用了bootstrap-tabcollapase库：https://github.com/flatlogic/bootstrap-tabcollapse

这是第三方引导程序附加组件，可将标签转换为小媒体查询宽度的手风琴面板。