Twitter bootstrap 强制剑道UI图表使用引导选项卡的全宽

我有一个页面，其中我有3个剑道UI图，每个都在一个单独的选项卡中。我希望所有图都使用可用的全宽度，但只有第一个图这样做

我知道我可以为图表指定宽度，但我不想/无法预先指定此宽度（响应性和所有）。我试着用包含图表的div的宽度来进行游戏。我还尝试在这些div上设置

col-lg-12

类。似乎什么都不管用

这是我的html：

<ul class="nav nav-tabs">
    <li class="active"><a data-target="#chart1" data-toggle="tab">Chart 1</a></li>
    <li><a data-target="#chart2" data-toggle="tab">Chart 2</a></li>
    <li><a data-target="#chart3" data-toggle="tab">Chart 3</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="chart1">
        <div id="chart1"></div>
    </div>
    <div class="tab-pane fade in" id="chart2">
        <div id="chart2"></div>
    </div>
    <div class="tab-pane fade in" id="chart3">
        <div id="chart3"></div>
    </div>
</div>

。
您的选项卡窗格ID和图表分区ID不应相同

<div class="tab-pane fade in active" id="chart1tab">
    <div id="chart1"></div>
</div>
<div class="tab-pane fade in" id="chart2tab">
    <div id="chart2"></div>
</div>
<div class="tab-pane fade in" id="chart3tab">
    <div id="chart3"></div>
</div>

更新

如果初始大小仍然存在问题，则可以在第一次显示相应选项卡时创建图表。
Rienus修复程序适用于JSFIDLE。干杯
$(window).on("resize orientationchange", function () {        
    kendo.resize($("body"));
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    kendo.resize($("body"));
});