html - 在 Bootstrap 网格中没有获得任何 margin

Question

我今天使用 bootstrap 创建了一个模板。突然之间，我的网格之间没有任何余量。

我的标记非常简单:

<div class="container" div style="margin-top:50px;margin-bottom:50px">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
            <p>flacon</p>
            </div>
            <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
            <p>flacon</p>
            </div>
            <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
            <p>flacon</p>
            </div>
            <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 box">
            <p>flacon</p>
            </div>
        </div>
    </div>

我以前没有遇到过这样的事情。请帮助我。

Answer 1

bootstrap 中的列之间没有边距，但有填充。当您将背景颜色设置为白色时，也会为填充创建一个背景，这就是为什么它看起来是连续的而不是分开的。

添加这个:

<div class="col-sm-3">
  <div class="white-box">
     ...
  </div>

</div>

使用 .white-box 任何你想要的比如 background-color: white;