Javascript 如何在网页中有效地并排排列三个动态图

我正在为我的html页面使用引导。我想把三个动态图并排放在一排。我怎样才能做到这一点？如果你能看到图表变得笨拙，我真的想避免它

这是截图

这是我写的代码

#格拉夫迪夫
脚本（type='text/javascript'）。
函数变暗颜色（colorStr）{
//在dygraph-utils.js中定义
var color=Dygraph.toRGB（colorStr）；
color.r=数学地板（（255+color.r）/2）；
color.g=数学地板（（255+color.g）/2）；
color.b=数学地板（（255+color.b）/2）；
返回'rgb（'+color.r+'、'+color.g+'、'+color.b+'）；
}
多功能柱形绘图仪（e）{
//我们需要同时处理所有系列。
如果（e.seriesIndex！==0）返回；
var g=e.dygraph；
var ctx=e.drawingContext；
var集合=e.allSeriesPoints；
变量y_bottom=e.dygraph.toDomYCoord（0）；
//找到x值之间的最小间距。
//这决定了条的宽度。
var min_sep=无穷大；
对于（var j=0；j10000000）{return返回力矩（num）（num/1000）；}，includeZero:true，plotter:multi-columnbarplotter}）；
< /代码> 我不太清楚你想要达到什么，但是从你的描述中，我认为你应该考虑使用Bootstrap。这应该使HTML元素保持在正确的位置，这取决于屏幕宽度（也可以是移动屏幕）。调整<代码> COL XS**/CODE >以达到正确的间距。
<div class="row">
  <div class="col-xs-4">    
    Chart 1 
  </div>
  <div class="col-xs-4">               
    Chart 2
  </div>
  <div class="col-xs-4">
    Chart 3
  </div>
</div>


图1
图2
图3