为什么在使用highcharts时，引导程序选项卡显示宽度不正确的选项卡窗格div？

为什么在使用highcharts时，引导程序选项卡显示宽度不正确的选项卡窗格div？ 原因

这不是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 之后 加载此补丁，简而言之， 后一个规则将获胜。

演示版

提示：切换到“ 配置文件” 选项卡以查看区别。