Bootstrap为列添加边距

Question

这可能很简单，但是我想不明白。我已经花了一个小时左右去查询相关资料，但仍然无法解决问题。

以下是我的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正确实现此操作的帮助或说明，我们将不胜感激 :)

- user282076

Answer 1

演示 Fiddle

最好的方法是添加一个内部容器，然后在列上添加内边距。这样可以确保 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">
                <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;
}

---

或者

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

例如，col-md-3 的宽度为100/4=25%。因此，您可以将其减少到20%，并将剩余的5%分配给您的边距。

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

- SW4

---

太完美了！正是我所需要的。救命恩人！ - user282076

@user282076 不用担心 - 我还添加了一个响应式的替代方案 http://jsfiddle.net/swfour/52VtD/4166/ - SW4

Answer 2

我曾经遇到过同样的问题；以下方法对我很有效。希望能帮助到其他人：

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Set room heater temperature
    </div>
</div>
<div class="col-md-6">
  <div class="col-md-12">
    Set room heater temperature
  </div>
 </div>
</div>

这将自动在两个div之间渲染一些空间。

- krishna kinnera