为什么引导选项卡显示选项卡窗格div与不正确的宽度时使用高图表？

Question

为什么引导选项卡显示选项卡窗格div与不正确的宽度时使用高图表？

因此，我正在使用Twitter的Bootstrap创建一个带有选项卡内容的页面，但是我的起始活动div的内容总是与我其他选项卡的内容不同。例如，我在不同的选项卡中使用Highcharts.js绘制图表，但是活动的选项卡总是正确显示，而其他选项卡的宽度不正确。

请查看下面的示例：

        <div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <h3>Test</h3>

                    <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">One</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Two</a></li>
                        <li><a data-toggle = "tab" href = "#three">Three</a></li>
                    </ul>

                    <div class="tab-content">

                        <div class="tab-pane active" id="one" >
                            <h4>One</h4>
                            <div id = "container1"></div>
                            <script type = "text/javascript">
                                $(function () {
                                    $('#container1').highcharts({
                               
                                    });
                                });
                            </script>
                        </div>

                        <div class="tab-pane" id="two" >
                        <h4>Two</h4>
                        <div id = "container2"></div>
                        <script type = "text/javascript">
                            $(function () {
                                $('#container2').highcharts({
                        
                                });
                            });
        
            </div>
        </div>
        </div>
    </div>

在这种情况下，切换页面加载上的活动选项卡使图表看起来对我来说是正确的，但其余的总是延伸到边缘(就我的数据而言，我只想填充跨距9 div的空间)。我只是在这个例子中使用了虚拟图表，但这是相同的想法。

这里有一个JSFiddle：http://jsfiddle.net/dw9tn/

我要问你们的问题是：

1.)就我一个人吗？

2.)当标签被激活时到底发生了什么？查看引导CSS，它似乎处理显示：无和显示：块，但我对这种情况下的工作方式没有很好的理解。

3.)这是高级图表问题还是引导问题？我注意到这种情况发生在非高图表元素中(比如在侧栏中显示tweet)，所以我倾向于引导。

4.)有什么解决办法可以让一切一致吗？

Answer 1

问题是高级图表无法计算具有CSS的容器的宽度：display:none，因此应用的是默认宽度(600 Px)。事实上，浏览器无法计算这些元素的宽度。例如，当您使用分隔符调整结果窗口的大小时，图表将调整大小并将工作。所以你有三个选择：在第一次单击该选项卡后呈现图表在开始时呈现图表，但每次单击并调整窗口大小后使用chart.setSize(w,h)有新的宽度和高度在开始时呈现图表，但在选项卡之后单击调用chart.reflow()