Chartkick 和 Twitter Bootstrap 交互弄乱了我的仪表板

Question

我正在使用 Twitter bootstrap 导航选项卡来创建一个仪表板，其中每个图表的单个页面都带有选项卡。我正在使用 chartkick 来生成这些图表。当我将它与选项卡配对时，后两个选项卡会调整 chartkick 图表的大小并使它们无法使用。

<div>
  <ul class="nav nav-tabs responsive" id="myTab">
        <li id="10" class="active"><a data-toggle="tab" href="#I">Need By Monthly Breakout</a></li>
        <li id="11"><a data-toggle="tab" href="#J">Model Quantities Breakout</a></li>
        <li id="12"><a data-toggle="tab" href="#K">Monthly Quantities Breakout</a></li>
  </ul>
</div>
<div class="tab-content responsive">
  <div class="tab-pane fade in active" id="I">
    <%= render partial: 'orderschart_a' %>
  </div>  
  <div class="tab-pane fade in" id="J">
    <%= render partial: 'orderschart_b' %>
  </div>
  <div class="tab-pane fade in" id="K">
    <%= render partial: 'orderschart_c' %>
  </div>
</div>

![这是第一个选项卡的输出，看起来很正常。 ][1]

![这是第二个选项卡的输出，你可以看到它出于某种原因压缩了图表。][2]

![这是第三个选项卡的输出，你可以看到它出于某种原因压缩了图表。][3]

如您所见，这在尝试制作仪表板时非常不方便，但我看不出如何修复它。

我测试了独立于选项卡页面的第二个和第三个图表，当它们不是选项卡的一部分时它们工作正常。

我试过添加响应式标签，但我也无法让它工作。

我真的不想在我的图表中不使用标签页，但如果我不能让它工作，我会的。

Answer 1

原来问题出在 div 以及选项卡实际上是 div 的子 div 的方式和可用框的总大小。我最终将每张图表放在了自己的页面上。

Chartkick 和 Twitter Bootstrap 交互弄乱了我的仪表板

Chartkick and Twitter Bootstrap interaction is messing up my dashboard

tabs

twitter-bootstrap

twitter-bootstrap-3

chartkick