Question

我有两个标签，标签1和标签2，当初次加载页面时，第一个标签中的图表同时加载，这恰好适合col-md-6，现在，当我点击选项卡2，该选项卡中的图表折叠到第一个图片的近一半，我希望它也适合col-md-6正确和好，有什么我做错了吗？

请看一下这个jsfiddle

Answer 1

使用此jquery选项卡选择功能，它将解决您的问题。

 jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( "#graph-container-gray, #graph-container-red" ).each(function() {
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})

Answer 2

看看这个小提琴 Click To View

<div class="tab-content">
                <div class="tab-pane active" id="1">
                    <div class="col-md-6">
        <div id="graph-container-gray" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                </div>

                </div>
                <div class="tab-pane active" id="2">
                <div class="col-md-6">
                        <div id="graph-container-red" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                    </div>
                </div>
            </div>

bootstrap选项卡中的highcharts图表未正确显示

2 个答案: