Question

我遇到了新的Bootstrap 3网格系统问题。我想创建4列网格。所以这是我的代码：

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

我的问题是列之间没有差距。网格将padding-left和padding-right应用于列而不是margin-left和margin-right。

当我删除填充并添加边距时，它会折叠。我怎么解决这个问题？还是有些东西我不能理解？

Answer 1

如果你不能使用默认填充来创建间隙，你必须在相应的列中添加`margin-left'并调整％width。

例如.col-lg-4通常有33％的宽度，所以你要减少一点......

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

http://bootply.com/74374

另一种选择是在列内使用容器，然后填充将起到创建间隙的作用。

Answer 2

对于更精确的列宽，您可以使用css3 calc() operator

.col-lg-4 {
    margin-left:15px;
    width:31.6%; /* non-css3 fallback */
    width: calc( 33.33333333% - 15px ); /* css3 calculation */
}

Answer 3

您需要将该行包含在 .container DIV中。否则Bootstrap知道列之间应该没有间隙。

Answer 4

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

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

我找到了一个适合我们问题的解决方案，并且很可能适用于大多数尝试空间列并保持与网格系统其余部分相同的装订线宽度的人。

这是我们最终的结果

在列之间留下阴影是有问题的。我们不希望列之间有额外的空间。我们只是想让排水沟变得透明＆＃34;所以网站的背景颜色会出现在两个白色列之间。

这是两列的标记

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

CSS

.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;
}

这种方法确实需要一个带有负边距的内部div，就像＆＃34; row＆＃34; class bootstrap使用。而这个div，我们称之为＆＃34;凸起块＃34;，必须是列的直接兄弟

这样您仍然可以在列中获得适当的填充。我已经看到了通过创建空间似乎有效的解决方案，但遗憾的是，它们创建的列在行的任一侧都有额外的填充，因此它最终使行更薄，以便为网格布局设计。如果你看一下所需外观的图像，这意味着两列在一起会小于顶部的一列，这会破坏网格的自然结构。

这种方法的主要缺点是需要额外的标记来包装每列的内容。对我们来说，这是有效的，因为只有特定的列需要它们之间的空间才能达到理想的效果。

希望这有帮助

如何处理Bootstrap 3列没有差距？

4 个答案: