html - 在 Bootstrap 3 中的面板之间添加空格

Question

我正在使用 Bootstrap 3.0，但似乎无法弄清楚如何在面板之间添加填充/空间。

<div class="row">
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>First Cell</h4>
    </div>
  </div>
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>Second Cell</h4>
    </div>
  </div>
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>Third Cell</h4>
    </div>
  </div>
</div>

我尝试添加一个类并将宽度设置为 30%，但只有当您有两个面板并将其中一个拉到右边时它才有效。如果我添加边距，那么它会关闭响应，最后一个单元格会掉到下一行。

如何响应式地在面板之间添加间隙？

Answer 1

我倾向于不组合 .panel 和 .col*:

http://jsfiddle.net/isherwood/xTc7a/1/

<div class="row">
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>First Cell</h4>

            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>Second Cell</h4>

            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>Third Cell</h4>

            </div>
        </div>
    </div>
</div>