Question

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

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

Answer 1

请参阅：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;
}

它实际上并不是一个边际（差距），但确实像它一样。

Answer 2

通常，您会在.col-sm-4 divs ....

中使用元素

请参阅this updated jsbin

我将其格式化为通常使用bootstrap网格的方式。如果你真的需要它没有排水沟，Naeems的答案提供了一个很好的选择。

HTH，

-Ted

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

2 个答案: