关于(Echarts图标插件)使用col在页面布局会出现的问题

开发工具与关键技术:工具:DW   关键技术:Echarts图标插件使用col出现的问题
作者:刘洪杰
撰写时间:2019年1月16日

我们有时候会使用col进行一些行行列列的页面布局,而我们在引用Echarts时使用col布局行对齐时会出现的问题。
布局页面
关于(Echarts图标插件)使用col在页面布局会出现的问题
上面截图代码如下
关于(Echarts图标插件)使用col在页面布局会出现的问题
上面截图是Echarts图标插件使用col进行行对齐的页面布局,
下图引用col进行页面布局作比较会出现错误的问题
关于(Echarts图标插件)使用col在页面布局会出现的问题
如图对应下面的代码,同样是引用col进行页面布局,没有出现行对齐
关于(Echarts图标插件)使用col在页面布局会出现的问题
下面截图进行解决问题
在给col在行内的一个分配问题
关于(Echarts图标插件)使用col在页面布局会出现的问题
解决后实现的页面
关于(Echarts图标插件)使用col在页面布局会出现的问题
对col进行行的排版比例,col对于行的所占比例为100%,当要页面布局时引用col布局时,也就是当两个盒子的大小在一行所占的比率超出了100%时会出现两行对排的情况。
Col一行当中可以分为12个等份,如上面出现错误两行对排的截图
将3个盒子进行平均分配就可以实现一行对齐
代码:col-4 col-4 col-4 (每个盒子所占4份)
就可以实现上面的页面了。