bootstrap布局之解决间隔问题

用bootstrap布局时会产生一些问题，比如col水平间距过大，

知其所以然才能最终解决问题；

当布局时把在行里面添加div：

代码如下：

<div class="container">

     <div class="row">

         <div class="col-md-4"><div class="box"></div></div>

        <div class="col-md-4"><div class="box"></div></div>

        <div class="col-md-4"><div class="box"></div></div>

    </div>

</div>

哇！其实效果不想这样的，改改吧：

给每个box来一个margin-left：-20px；咋样啦：

看起来还不错呢，但用过margin的会知道，现在的div块已经不居中了，

这样感觉损失了一部分东西去得到另一部分东西，并不很好的策略，

我们得知道间距是怎么造成的，打开开发者工具就能发现

而它的父容器列却有390px

可以看到只要消除了padding，就可以让间距缩小了是吗？
css代码：

[class*="col-"]{
            padding: 5px;

}
如图：

很完美！