Html 在引导网格中没有获得任何类型的余量

我今天用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>

弗拉孔

弗拉孔

弗拉孔

弗拉孔

---

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

引导网格系统没有添加任何边距，而是在列中添加了一个填充。您可以构建如下内容：

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

弗拉孔

弗拉孔

弗拉孔

弗拉孔

---

如我在评论中所述，我还删除了您的许多col-XX-3课程。有关mor的详细信息，请参阅

网格类应用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何.col md-class应用于元素不仅会影响中型设备上的样式，而且如果没有.col lg-class，也会影响大型设备上的样式

---

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

添加以下内容：

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

</div>

...

---

使用

.white box

任意选择，例如

背景色：白色

您不需要重复

col-lg-3 col-md-3 col-xs-3 col-sm-3

。“最小的”：

col-sx-3

就足够了。嵌套没有行的列？引导文档希望您：“…只有列可以是行的直接子项”，反之亦然。至少我找不到这样的东西；）没问题，我来帮你：D