为什么引导选项卡显示选项卡窗格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()