Twitter bootstrap＆Highchart：水平滚动，响应

Question

亲爱的互联网长老 - 我为自己制造了一个令人头痛的问题，我希望你能帮忙:-)

这是一个由两部分组成的问题。 我有一个有三个面板的页面，想要一个水平幻灯片。 为此，我创建了按钮，在这里查看现场演示。

1.横向滑动，点击响应当右上方按钮“两个右窗格”我希望页面只显示是： 只有两个右窗格。 这在大屏幕上不是问题，但是我不能让它在稍微小一点上工作（媒体查询和进一步的响应，我想我能弄明白）。

同样地; 单击“单个左窗格”时，我希望它可以拉伸第三个（最右侧）面板，并隐藏其他两个面板。

显然，我希望它能回应100％的视口。

2. Highchart我根据左上方的按钮滑动，无法使Highchart图表相应地动作。 如果我调整整个窗口的大小，高图将会调整，但在滑动面板时我无法调整它。 有关图表的演示，请在第三个面板中向下滚动（这是“自制”图表）。

我试图在下面的屏幕截图中说明问题。

（我已经发布了另一个与同一页面有关的问题，如果你应该如此倾向于看一看）。

我怀疑它很简单，但我不能为我的生活看到我哪里出错了。 任何提示都将非常感激。 祝一切顺利。

Answer 1

Highcharts仅在调整窗口大小时调整大小，如果要调整图表大小，请使用chart.setSize(w,h) ，参见参考 。

Answer 2

嗯，好人，我有点想到了自己...为了别人可能的利益; 我的解决方案是将两个第一列的宽度设置为固定（或者更确切地说是最大宽度），从而使用calc来计算第三列的大小，减去两个固定宽度的div。

  width: -webkit-calc(98% - 520px);
 width: calc(98% - 520px);

对于问题的Highchart部分，非常感谢@Pawel的快速回答。 我还没有完全解决这个问题，因为我们目前正在讨论是否使用Highcharts是可行的方法。 如果是这样，我想我以后可能会回来提出更多问题。