在不增加大小的情况下向引导网格添加边距

Question

我试图在引导网格的边界周围添加一个空间，但当我这样做时，它会移动所有内容并将元素移动到下一行。我试着使用：after也一样，但没用。如何在不破坏网格的情况下在边界周围添加空间？

HTML

<div class="col-sm-4 col-xs-4 section1a sectionstyle">
  <small>first</small>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
  <a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit!</a>
</div>
<div class="col-sm-4 col-xs-4 section1a sectionstyle">
  <small>first</small>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
  <a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit!</a>
</div>
  <div class="col-sm-4 col-xs-4 section1a sectionstyle">
  <small>first</small>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
  <a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit!</a>
</div>

CSS

.sectionstyle {
  position : relative;
  border: 1px solid grey;
  border-radius: 1%;
  padding-bottom: 2%;
  background-color: tan;
  box-sizing: border-box;
  //margin:1px;
}
.sectionstyle:after {
  margin:5px;
}

JSBIN

http://jsbin.com/xicezopiqe/1/edit?html，css，输出

Answer 1

通常，您会在.col-sm-4div…中使用元素。。。。

查看此更新的jsbin

我对它的格式化更像是引导程序网格的典型使用方式。如果你真的需要没有排水沟的话，Naeems的答案提供了一个很好的选择。

HTH，

-Ted

Answer 2

请参阅：http://jsbin.com/tipasehalu/1/

你可以设置一个方框阴影插入作为边框，并使边框的颜色看起来像白色，所以感觉就像元素之间的间隙

.sectionstyle {
    position : relative;
    border: 1px solid #fff; // treated as a gap(margin)
    border-radius: 1%;
    padding-bottom: 2%;
    background-color: tan;
   box-shadow: inset 1px 1px 1px grey;  // traeted as a border
    box-sizing: border-box;
    //margin:1px;
}
.sectionstyle:after {
  margin:5px;
}

这实际上不是一个保证金（缺口），但确实像它一样。