Boostrap Col vs Webkit专栏

Question

我一直有这个问题，我总是使用webkit-columns解决它。但是我想知道是否有更好的方法来使用 Bootstrap 。

网格内有4个框。

<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
</div>

这给了我4个盒子，但是最后一个盒子比其他盒子有更多的余量。我希望他们所有人都有相同的边距，但像角落一样在角落处为0：

---编辑澄清---

为了澄清我的问题，我要添加这个jsfiddle你看到蓝框吗？我想用红色框开始和结束蓝色框，你能做到吗？不要在蓝色框中添加边距，蓝色框必须为100％，另一个框必须与该框的第一个和末尾对齐
在这里，我按照自己的意愿行事：Jsfiddle但是我在这里使用-webkit-column只是为了告诉你，如果你能用引导程序来做这件事就好了。

Answer 1

我要分享我创建的Demo。我希望它能让你到达某个地方。

<强> HTML

<div class="container">
     <div class="row">
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
        <div class="col-sm-3 custom-col">
            <div class="child-div">

            </div>
        </div>
    </div>
</div>

<强> CSS

.col-sm-3.custom-col{
    height:250px;
    /* outline: 1px solid green; */
    padding: 5px;
}

.child-div{
    height:100%;
    width:100%;
    background-color:red;
}

<强>更新

我更新了小提琴。 HERE