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

因此，我使用Twitter的引导程序创建了一个带有标签内容的页面，但是我的起始活动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的空间。在本例中，我只使用了虚拟图表，但这是相同的想法

下面是一个JSFIDLE：

我想问大家的问题是：

一,。这就是我吗

二,。选项卡处于活动状态时到底发生了什么？看看引导css，它似乎处理display:none和display:block，但我不太了解在这种情况下如何工作

三,。这是highcharts问题还是bootstrap问题？我注意到这种情况发生在我身上，我使用了非高端图表元素，比如在侧边栏中显示tweet，所以我倾向于使用bootstrap

四,。你能找到什么解决办法使每件事都保持一致吗

---

谢谢大家

图表的行内样式宽度不同。我不确定何时以及如何计算这些值，但您可以覆盖css中的值。

问题是Highcharts无法计算包含css:display:none的容器的宽度，因此应用的是默认宽度600px。事实上，浏览器无法计算此类元素的宽度

例如，当您将使用分隔符调整结果窗口的大小时，图表将调整大小并正常工作。所以你有三个选择：

在第一次单击该选项卡后渲染图表 在开始时呈现图表，但每次单击并调整窗口大小后，请使用新宽度和高度的chart.setizew，h 在开始时呈现图表，但在选项卡后单击call chart.reflow

---

根据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());
})

来源：

原因 这不是Highcharts问题，至少不是它本身的问题，问题是由引导使用display:none隐藏非活动选项卡引起的：

.tab内容>.tab窗格，.pill内容>.pill窗格{ 显示：无；/*这就是问题所在*/ } 这导致Highcharts无法获得初始化图表的预期宽度，因此默认为600px。这将发生在使用相同方法隐藏内容的其他工具上

纯CSS解决方案 我们可以使用height:0实现隐藏效果，而不是通过额外的重画或延迟初始化来解决问题；overflow-y:隐藏，这样隐藏的选项卡窗格仍在原位，并且具有有效宽度：

/*引导破解：修复隐藏标签内的内容宽度*/ .tab内容>.tab窗格：未激活， .pill content>.pill窗格：未激活{ 显示：块； 身高：0； 溢出y：隐藏； } /*自举黑客端*/ 更新：我们现在通过：not.active直接针对非活动选项卡，以避免可能的副作用（如果有）

此解决方案是无缝的，因此您不再需要担心图表是否位于选项卡窗格中。而且它的效率很高，因为它首先修复了宽度问题，因此无需在之后使用javascript通过调整大小/重画/回流来解决宽度问题

关于级联顺序的注意事项 这个补丁需要在引导css之后加载，因为，简言之，后一个规则获胜

演示 vs

---

提示：切换到Profile选项卡查看差异。

根据Paweł的回答，我给出了一个工作示例：

基本上，单击选项卡时，会在每个图表上调用.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
    });
})

---

我在另一篇文章中找到了一个更简单的解决方案。基本上，问题是因为Highcharts无法在设置了“display:none”的div上渲染。解决方案就是在CSS样式表中编写一个补丁

.tab内容>.tab窗格， .pill内容>.pill窗格{ 显示：内联； 可见性：隐藏； 位置：绝对位置； 宽度：930px； } .tab内容>.active， .pill content>.active{ 显示：内联； 能见度：可见； 位置：绝对位置； 宽度：930px； }

---

这将使选项卡使用可见性属性而不是显示。图表会很好地呈现。

谢谢你，伙计。我想我必须以某种方式覆盖宽度，但不幸的是，没有更简单的方法来解决这个问题。我注意到其他bootstrap元素媒体列表也出现了这种情况，所以我很快就会找到解决方案。关于这一点，有很多帖子，但找到这篇帖子花了很长时间，

---

唯一有好办法的。因此，这里有一些关键字，以帮助使其更可见：highcharts，引导，重画，隐藏，标签，回流，更新，宽度，高度，打破家长，css，显示：无，重新渲染，重新渲染，触发重画，调整大小，响应，引导3Wesome！我还得补充一句！每个属性之后都很重要，以克服引导优先级，但它工作得非常完美。这正是所需要的！谢谢。@Steve！重要提示：如果此修补程序之后出现了某些样式规则或引导程序本身，则可能需要更改顺序。虽然这对我有效，但当我访问以前的选项卡时，高位图表被隐藏，当我将鼠标悬停在它们上方时，它们变得可见，我也必须添加宽度的修复：宽度：0；溢出x：隐藏；和：宽度：自动；这有道理吗？很遗憾它没有引发真正的重画。初始渲染时的动画非常逼真。当我尝试此操作时，选项卡的“高度”计算不正确。例如，我的包含选项卡内容div上有一个边框样式，它不够大，无法包含选项卡的所有内容。