Html 引导向列添加边距

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

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

这当前正在创建一行，其中包含4列，这些列的样式略有不同

对于如何使用Bootstrap 3正确执行此操作的任何帮助或解释，我们将不胜感激：）

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

HTML

---

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

例如，

col-md-3

的宽度为100/4=25%。因此，你可以将这一比例降低到20%，并将剩余的5%分配给你的利润

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

---

我面临着同样的问题；以下几点对我很有效。希望这有助于有人登陆这里：

<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之间的一些空间。

完美！正是我需要的。救生员@用户282076不用担心-我还添加了一个响应性强的替代方案

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

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

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