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

Question

我试图在一行中有4个cols，边距相等，但我没有得到理想的外观

这是我的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>

css代码

.summary_boxes div
{
   background-color:#eee;
   border: 1px solid #DDDDDD;
   border-radius:3px;
}

这是结果

Answer 1

问题是Bootstrap使用填充列和列本身不应该直接应用其他样式。

你应该做的是制作列的子元素并给出你想要的样式，然后你将拥有你正在寻找的“边距”。

<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;
}

这是一个工作小提琴，您可能需要使输出窗口更宽，以便根据您的屏幕分辨率http://jsfiddle.net/LysqB/

正确查看结果