Html 使用bootstrap 3.1.1在多列之间添加边距

我试图在一行中有4列具有相等边距的列，但我没有得到想要的外观

这是我的html代码

    <div class="panel panel-default">

        <div class="panel-heading">Account Summary</div>

        <div class="panel-body">

            <div class="row center-block text-center summary_boxes">

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

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

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

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

            </div>

        </div>

这就是结果

---

问题是引导程序对列使用填充，列本身不应该直接应用其他样式

您应该做的是创建列的子元素，并为它们提供所需的样式，然后您将获得所需的边距

<div class="panel panel-default">
    <div class="panel-heading">Account Summary</div>
    <div class="panel-body">
        <div class="row center-block text-center summary_boxes">
            <div class="col-sm-3"><span>2500</span></div>
            <div class="col-sm-3"><span>1300</span></div>
            <div class="col-sm-3"><span>1000</span></div>
            <div class="col-sm-3"><span>1000</span></div>
        </div>
    </div>
</div>

---

这是一把工作的小提琴，您可能需要将输出窗口变宽，以便根据屏幕分辨率正确查看结果

预期结果是什么？此外，如果可能，请提供所有代码和fiddle。通过向boostrap div添加边距，您将把内容推到新行中，而不是尝试读取偏移为1列的.col md offset-*类

<div class="panel panel-default">
    <div class="panel-heading">Account Summary</div>
    <div class="panel-body">
        <div class="row center-block text-center summary_boxes">
            <div class="col-sm-3"><span>2500</span></div>
            <div class="col-sm-3"><span>1300</span></div>
            <div class="col-sm-3"><span>1000</span></div>
            <div class="col-sm-3"><span>1000</span></div>
        </div>
    </div>
</div>

.col-sm-3 > span {
    background: red;
    display: block;
}