data-toggle="tab"标签页切换时宽度尺寸不一致问题咨询

问题原因 #

• 核心原因是未给左侧垂直标签栏（.nav.nav-tabs）设置固定宽度，标签宽度默认随内容和状态样式自适应：
  1. Bootstrap标签的激活态默认带有和非激活态不一致的样式，比如边框粗细、内边距差异，部分主题还会给激活态的标签文字设置加粗效果，加粗后的文字宽度更大，会直接撑开标签宽度。
  2. 第一个标签的代码结构和其他标签不一致：第一个标签的文字内容包裹了额外的<span>标签，还存在换行、多余的 空格符，如果你的样式表中对<span>设置了额外边距，也会导致标签宽度计算异常。
• 次要原因是部分浏览器的文本宽度计算规则存在差异，如果没有显式设置容器宽度，切换标签时右侧内容区的宽度变动会反向挤压左侧标签栏，导致标签宽度抖动。

修复方案 #

1. 给左侧标签栏添加固定宽度样式，示例如下：

.tabs-vertical .nav.nav-tabs {
  /* 按你最长的标签内容调整到合适宽度即可 */
  width: 220px;
}
.tabs-vertical .nav.nav-tabs li a {
  /* 统一激活态和非激活态的内边距、边框，避免样式差异撑开宽度 */
  padding: 8px 12px;
  border: 1px solid transparent;
}
/* 若存在激活态文字加粗的设置，可提前预留宽度避免抖动 */
.tabs-vertical .nav.nav-tabs li a {
  font-weight: 400;
}
.tabs-vertical .nav.nav-tabs li.active a {
  font-weight: 600;
}

2. 统一所有标签的代码结构，去掉第一个标签额外的<span>包裹和多余的 ，改成和其他标签一致的写法：

<li class="active"><a data-toggle="tab" href="#tabsNavigationSimplebg5">Videos &amp; Docs</a></li>

内容的提问来源于stack exchange，提问作者user3376642