因此，我正在使用 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({
                                        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。)当标签变得活跃时到底发生了什么？查看 bootstrap css，这似乎处理了 display: none 和 display: block，但我不太了解在这种情况下它是如何工作的。

3.) 这是 highcharts 问题还是 bootstrap 问题？我注意到这发生在我身上的非 Highcharts 元素(比如在侧边栏中显示推文)，所以我倾向于 Bootstrap 。

4.) 是否有任何解决方案可以使一切保持一致？

谢谢大家!

最佳答案

原因

这不是 Highcharts 问题，至少不是它本身，问题是由 Bootstrap uses display: none to hide inactive tabs 引起的。 :

.tab-content > .tab-pane /* , .pill-content > .pill-pane */ {
    display: none;      /* this is the problem */
}

这导致 Highcharts 无法获得预期的宽度来初始化图表，因此 defaults to 600 (像素)。使用相同方法隐藏内容的任何其他工具也会发生这种情况。

纯 CSS 解决方案

我们可以使用 height: 0; 来实现隐藏效果，而不是通过额外的重绘或延迟初始化来解决这个问题； overflow-y: hidden，这样隐藏的选项卡 Pane 仍然存在并且具有有效的 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 */

更新:现在我们通过 :not(.active) 直接定位非事件标签，以避免可能的副作用。

此解决方案是无缝的，因此您不必再担心图表是否位于选项卡 Pane 内。而且它的效率很高，因为它首先解决了宽度问题，因此之后无需使用 javascript 通过调整大小/重绘/重排来解决宽度问题。

关于 CSS 级联顺序的注意事项

由于CSS cascade order rules，此补丁需要在 Bootstrap 后 css 加载，简而言之，后者规则胜出。

演示

Before对比After

提示:切换到个人资料选项卡以查看差异。

关于html - 为什么 Bootstrap 选项卡在使用 highcharts 时显示宽度不正确的选项卡 Pane div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17206631/