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;

}

如图：

css选择器[class*= col-]

[class*= col-]  代表包含  col-  的类名 ，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。

[class^=col-]  代表 以 col- 开头的类名，比如说 col-md-4

[class$=col-] 代表以 col- 结尾的类名

这是不是和正则有点像呢？？

^[0-9]  代表 匹配以数字开头的

而 [0-9]$ 代表匹配以数字结尾的

————————————————