Bootstrap 为列添加边距

这可能很简单，但我的思绪却纠结于如何解决这个问题。花了一个小时左右搜索这个，但仍然不起作用。

我的 HTML 代码...

<div class="section-container light-bg">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2 style="text-align:center;">Main Title Right Here</h2>
            <h4 style="text-align:center;">Slogan text underneath</h4>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
    </div>
</div>

CSS

.section-container.light-bg {
    background-color: #F5F5F5;
    color: #444444;
}

.section-container .light-panel {
    background-color: #ffffff;
    border-radius:10px;
}

当前正在创建一行 4 列，样式稍有不同。

任何有关如何使用 Bootstrap 3 正确执行此操作的帮助或解释将不胜感激:)

演示小提琴 http://jsfiddle.net/swfour/52VtD/4165/

最好的方法是添加一个内部容器，然后在列上填充。这可确保 Bootstraps 功能保持预期状态。

HTML

<div class="section-container light-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                 <h2 style="text-align:center;">Main Title Right Here</h2>

                 <h4 style="text-align:center;">Slogan text underneath</h4>

            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                    <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                     <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                    <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                    <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
        </div>
    </div>

CSS

 .section-container.light-bg {
    background-color: #F5F5F5;
    color: #444444;
}
.inner {
    background-color: #ffffff;
    border-radius:10px;
    padding:10px;
}
.col-md-3 {
    padding:10px;
}

或者 http://jsfiddle.net/swfour/52VtD/4166/

您可以使用计算出的宽度/边距，无需更改 HTML。

例如。的宽度col-md-3是100/4=25%。因此，您可以减少这一点，比如减少到 20%，然后将剩余的 5% 分配给您的利润。

.col-md-3 {
    width:20%;
    margin:0 2.5%;
}