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;

Answer 2

Bootstrap网格系统不会添加任何边距 - 而是在列内添加填充。你可以建立这样的东西：

<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课程。有关详情，请参阅Bootstrap documentation

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

在引导网格中没有任何余量

2 个答案: