Bootstrap 3.x 导航选项卡的响应问题

Question

我有一个引导组件 nav-tabs，当页面宽度大于行所需的宽度时（引导 .row div），它可以正常工作。 问题是，当我更改移动设备的视图时，响应式设计的行为不正常，并且选项卡未对齐。 请看下面链接中的代码，页面宽度减小到什么程度，Company、Support 和 Design 选项卡行为异常。

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

这是一个第三方引导插件，可将标签转换为小媒体查询宽度的手风琴面板。