Twitter bootstrap 如何处理Bootstrap 3列没有间隙？

我在新的引导3网格系统的麻烦。我想创建4列网格。这是我的代码：

<div class="row">
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
</div>

...
...
...

我的问题是柱子之间没有空隙。网格对列应用左填充和右填充，而不是左边缘和右边缘

---

当我删除填充并添加边距时，它会折叠。我该怎么解决这个问题？或者有什么我无法理解的吗？

如果不能使用默认的填充来创建间距，则必须在相应的列中添加“左边距”，并调整%宽度

例如，

.col-lg-4

通常具有33%的宽度，因此您可以稍微减小它

.col-lg-4 {
    margin-left:15px;
    width:31.6%;
}

---

另一种选择是在列内部使用容器，然后填充将产生间隙。

要获得更精确的列宽，可以使用

---

您需要将该行包含到.containerDIV中。否则，Bootstrap会理解列之间应该没有间隙。

我已经发布了这篇文章，但它仍然与原始问题相关，并提供了有关此方法如何工作的更多信息

我也有过类似的问题，列之间的空间。根本问题是引导程序3和4中的列使用填充而不是边距。因此，两个相邻列的背景色相互接触

我找到了一个适合我们的问题的解决方案，它很可能适用于大多数试图分隔柱并保持与网格系统其余部分相同的边沟宽度的人

这是我们追求的最终结果

在列之间设置带有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景色就会出现在两个白色的柱子之间

这是两列的标记

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

这种方法确实需要一个带负边距的内部div，就像“row”类引导使用的那样。这个div，我们称之为“提升块”，必须是列的直接同级

这样，您仍然可以在列中获得适当的填充。我见过通过创建空间来工作的解决方案，但不幸的是，它们创建的列在行的两侧都有额外的填充，因此最终会使网格布局设计的行变薄。如果您查看图像以获得所需的外观，这意味着两列加在一起将比顶部的一列大，这将破坏网格的自然结构

这种方法的主要缺点是需要额外的标记来包装每一列的内容。对我们来说，这是可行的，因为只有特定的列需要在它们之间留出空间来实现所需的外观

---

希望这有帮助

谢谢回复。使用容器是更好的解决方案。你可以参考我对类似问题的回答。希望这有帮助。

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}