原因
这不是Highcharts问题，至少不是一个问题本身，该问题是由Bootstrap用于
display:none隐藏不活动的选项卡的事实引起的：
.tab-content > .tab-pane, .pill-content > .pill-pane { display: none; }这将导致Highcharts无法获得预期的宽度来初始化图表，因此默认为
600px。使用相同方法隐藏内容的其他工具也会发生这种情况。
纯CSS解决方案
无需使用额外的重绘或延迟的初始化来解决该问题，我们可以使用来实现隐藏效果
height: 0; overflow-y:hidden，这样，隐藏的选项卡窗格仍然存在并且有效
width：
.tab-content > .tab-pane:not(.active),.pill-content > .pill-pane:not(.active) { display: block; height: 0; overflow-y: hidden;} 更新 ：现在，我们直接通过定位非活动标签页
:not(.active)，以避免可能产生的副作用。
该解决方案是无缝的，因此您不必担心图表是否在选项卡窗格中。而且它非常有效，因为它首先解决了宽度问题，因此以后无需通过使用javascript进行大小调整/重绘/重排来解决宽度问题。
关于级联顺序的注意事项
由于CSS级联顺序规则，因此需要 在引导CSS 之后 加载此补丁，简而言之， 后一个规则将获胜。
演示版
提示：切换到“ 配置文件” 选项卡以查看区别。
