为什么Bootstrap选项卡在使用highcharts时显示宽度不正确的选项卡窗格？
因此，我使用Twitter的Bootstrap创build了带有标签内容的页面，但是我的起始活动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({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); }); </script> </div> <div class="tab-pane" id="two" > <h4>Two</h4> <div id = "container2"></div> <script type = "text/javascript"> $(function () { $('#container2').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); }); </script> </div> <div class="tab-pane" id="three" > <h4>Three</h4> <div id = "container3"></div> <script type = "text/javascript"> $(function () { $('#container3').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); }); </script> </div> </div> </div> </div> <div class = "span3"> <p>Here is the content on my sidebar</p> </div> </div> 在这种情况下，切换页面加载时的活动选项卡使得该图表对我来说看起来是正确的，但是其余部分总是一直延伸到边缘（在我的数据的情况下，我只想填满span9的空间div，在这种情况下，我只是使用了虚拟图表，但它是一样的想法。
这里是一个JSFiddle： http : //jsfiddle.net/dw9tn/
我的问题都是：
1）这只是我吗？
2.）制表符被激活时究竟发生了什么？ 看看引导CSS，这似乎处理显示：无和显示：块，但我没有很好的理解在这种情况下如何工作。
3.）这是一个高层次问题还是引导问题？ 我注意到这个发生在我身上的非高级元素（如在边栏中显示推文），所以我倾向于自举。
4.）有什么解决scheme可以find使一致性？
多谢你们！
问题是Highcharts不能计算具有CSS： display:none的容器的宽度，所以应用的是默认宽度（600px）。 事实上，浏览器无法计算这些元素的宽度。
例如，当您将使用分隔符来调整“结果”窗口的大小时，图表将resize并将工作。 所以你有三个select：
- 在第一次点击该标签后呈现图表
- 在开始绘制图表，但每次点击和窗口大小调整后，使用带有新宽度和高度的
chart.setSize(w,h) - 渲染图表开始，但是在标签点击后调用
chart.reflow()
原因
这不是一个Highcharts问题，至less不是由它本身，问题是由Bootstrap使用display: none来隐藏不活动的选项卡：
.tab-content > .tab-pane, .pill-content > .pill-pane { display: none; /* this is the problem */ }
这会导致Highcharts无法获得预期的宽度来初始化图表，因此默认为600px 。 这会发生在其他工具使用相同的方法来隐藏内容。
纯粹的CSS解决scheme
我们可以使用height: 0; overflow-y: hidden来实现隐藏效果，而不是用额外的重绘或延迟的初始化来解决问题height: 0; overflow-y: hidden height: 0; overflow-y: hidden ，这样隐藏的选项卡窗格仍然在位，并具有有效的width ：
/* bootstrap hack: fix content width inside hidden tabs */ .tab-content > .tab-pane:not(.active), .pill-content > .pill-pane:not(.active) { display: block; height: 0; overflow-y: hidden; } /* bootstrap hack end */
更新 ：先前的两步解决scheme首先隐藏所有选项卡，然后再次使活动选项卡可见。 相比之下，现在我们有一个1步骤的解决scheme，直接针对非活动标签。
这个解决scheme是无缝的，所以你不必担心图表是否在标签页面内。 而且它的效率很高，因为它首先解决了宽度问题，因此无需通过使用javascriptresize/重绘/重排来解决宽度问题。
关于级联顺序的注意事项
这个补丁需要在引导CSS后加载，因为CSS级联顺序规则 ，简而言之， 后者的规则是胜利的 。
演示
之前和之后
提示：切换到“ configuration文件”选项卡查看区别。
根据Pawel的回答，我在开始时绘制图表，然后调整图表大小。
使用的代码（使用bootstrap 3.0.3和HighCharts 3.0.7）
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('#container').highcharts().setSize($('#container').width(),$('#container').height()); })
资料来源： http ： //getbootstrap.com/javascript/#tabs-usage
基于Paweł的回答，我做了一个工作的例子：
http://codepen.io/colinsteinmann/pen/BlGfE
基本上，当单击一个选项卡时，每个图表都会调用.reflow（）函数。 这样，图表就会根据应用于容器的新维度重新绘制。
这是最重要的代码片段：
// fix dimensions of chart that was in a hidden element jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class var chart = jQuery(this).highcharts(); // target the chart itself chart.reflow() // reflow that chart }); })
我在另一篇文章中find了一个更简单的解 基本上，问题出现是因为Highcharts无法在“display：none”设置的div上呈现。 该解决scheme只是在你的CSS样式表中写一个修正。
.tab-content > .tab-pane, .pill-content > .pill-pane { display: inline; visibility: hidden; position: absolute; width: 930px; } .tab-content > .active, .pill-content > .active { display: inline; visibility: visible; position: absolute; width: 930px; }
这将使标签使用visibility属性而不是display 。 图表将呈现良好。
在线样式“宽度”是不同的图表。 我不知道什么时候以及如何计算，但你可以覆盖在CSS例如。
