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

Posted 2023-03-06

【中文标题】如何处理 Bootstrap 3 列没有间隙？

【英文标题】：How to deal with Bootstrap 3 columns have no gap?

【发布时间】：2013-08-17 13:15:19

【问题描述】：

我在使用新的 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>

我的问题是列之间没有间隙。 Grid 对列应用 padding-left 和 padding-right 而不是 margin-left 和 margin-right。

当我删除填充并添加边距时，它会崩溃。我将如何解决这个问题？还是有什么我无法理解的？

【问题讨论】：

您可以参考我对类似问题的回答。希望这可以帮助。 ***.com/questions/18738712/…

【参考方案1】：

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

我在列之间的空间方面也遇到过类似的问题。根本问题是引导程序 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>

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，就像引导程序使用的“行”类一样。而这个div，我们称之为“raised-block”，必须是列的直接兄弟

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

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

希望对你有帮助

【参考方案2】：

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

【参考方案3】：

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

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

【参考方案4】：

如果您不能使用默认填充来创建间隙，则必须将 `margin-left' 添加到适当的列并调整 % 宽度。

例如.col-lg-4 通常有 33% 的宽度，所以你可以把它缩小一点..

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

http://bootply.com/74374

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

【讨论】：

感谢您的回复。使用容器是更好的解决方案。