HTML5页面缩放排版错乱

我用的是bootstrap3，因为页面要自适应，所以给body设置了width:100%,然后因为
bootstrap的列宽度有点差距，所以给每列又重新设置了宽度，类似这样：

这里要说明一下，因为bootstrap自带的col-lg-2 太窄而col-lg-3又太宽，所以才会这样设置，可是每次缩放的时候（ctrl+滚轮），整个页面都错乱得不能看，因为一旦固定了这个宽度百分比，它就一直这么宽，不会随着页面放大。请问有什么解决办法吗

尽量不要自己去设置宽度，等于你破坏了bootstrap的规则,还是用栅格系统吧。。。