如何在列之间添加间距？

Question

如何在列之间添加间距？

268

我有两列：

<div class="col-md-6"></div>
<div class="col-md-6"></div>

我该如何在它们之间添加空格？

输出将简单地是两列挨在一起，占据整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。

如果我想要在这两者之间有100px的空隙，如何通过Bootstrap自动实现：每个div的宽度将变为450px以弥补空隙。

- Muhammed Bhikha

36个回答

188

您可以使用 col-md-offset-* 类来实现列之间的间距，该类在此处有详细介绍。间距是一致的，以便所有列都正确对齐。为了获得均匀的间距和列大小，我建议执行以下操作：

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

在Bootstrap 4中使用：offset-2或offset-md-2。

- Ben

39

如果我想使用默认列大小，这个方法就可以使用，但是如果我想要特定大小的间距，而不是偏移列怎么办？ - Muhammed Bhikha

3

在这种情况下，我建议使用提供的混合样式来调整列之间的间距：http://getbootstrap.com/css/#grid-less - Bootstrap无法根据额外的间距“调整”网格宽度，因为它基于像素网格。请参考提供的混合样式进行调整。 - Ben

本，你认为建议在HTML中添加非语义的空div来添加网格间距明智吗？ - George Katsanos

2

George - 你已经有了偏移类。但是如果你发现内置的间距不足够，那么你可以尝试编译自己的Bootstrap版本，根据你的喜好选择Less或Sass。然后你可以修改列宽和间距以匹配你的网站。添加空的div并不是真正的问题，重要的是要想出一些你（和/或你的团队）可以一致使用的东西；如果空的div是你实现这一点的方式，那么没问题；记住，你的标记是为开发人员而不是最终用户阅读的。 - Ben

52

这篇帖子根本就不是一个答案，它制造了一个比问题更大的间隙。 - Sebastien

3

在Bootstrap 4中，这是offset-md-2或offset-2。 - Mahesh

82

我知道我来晚了，但你可以尝试使用填充来间隔这些框。

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS：

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

试试看吧

- Robin Jonsson

1

并不是因为你不能在其中使用 row-eq-height。 - Greg Wozniak

30

您可以使用 background-clip 和 border 属性的 box-model。

.box{
  box-sizing: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}

<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

- Ali El Habchi

我在所有答案中找到的最好的技巧，谢谢，它解决了我的问题，因为在我的情况下，这些框是从数据库动态获取的。 - Yousef Altaf

太好了！谢谢，我无法在我的代码中更改标签元素，这解决了只更改CSS的问题，谢谢！ - Alisson Diel

14

我也遇到了类似的列间距问题。根本问题是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>

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，就像 Bootstrap 使用的 "row" 类一样。而且这个 div，我们称之为 "raised-block"，必须是列的直接同级兄弟元素。

这样做仍然可以在列内得到正确的填充。我曾经见过一些解决方案，它们似乎通过创建空间来起作用，但不幸的是，它们创建的列在行的两侧都有额外的填充，所以最终使得行比网格布局设计时更窄。如果您查看所需外观的图像，这意味着两个列加在一起会比顶部的一个更大的列更小，从而破坏了网格的自然结构。

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

- Joe Fitzgibbons

13

根据Bootstrap 4的文档，您应该给父元素一个负边距 mx-n* ，然后给子元素一个正填充 px-*。

根据 Bootstrap 4 文档，您应该给父元素一个负边距 mx-n*，然后给子元素一个正填充 px-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

- estani

对我来说最有效的是（行之间的垂直间距）<div class="row mt-n4">和<div class="col-3 pt-4">。 - Gavin

12

这将在两列之间留出空间，如果您想更改默认宽度，可以使用mixin来修改默认的Bootstrap宽度。或者，您可以使用内联CSS样式指定宽度。

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

- Amit

4

这句话的意思是：“这并不完全是@Muhammed所问的语义。使用pull-left、pull-right会改变列的顺序。”请注意，我的翻译旨在使原文更易懂，并尽量保持原意，不包含解释或额外内容。 - Luchux

8

您可以使用col-xs-*类在下面编码的col-xs-* div中实现列之间的间距。间距是一致的，以便所有列都正确对齐。为了获得均匀的间距和列大小，我会按照以下步骤操作：

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

- User_3535

7

既然你使用了 bootstrap，我猜你想做这个东西 响应式。在这种情况下，你就不应该使用固定的尺寸，比如用 'px'。

作为其他解决方案的替代方法，我建议将两列都设置为 "col-md-5"，而不是 "col-md-6"，然后在包含列的父元素 "row" 中添加类 "justify-content-between"，它会将空闲的空间放在中间，你可以在 bootstrap 文档这里查看。

当然，对于多于两列的情况，也适用此解决方案，只需相应调整 "col-md-x" 的值即可。

希望能有所帮助；）

- Hugo

6

Bootstrap 5 提供了一种更方便的方法来添加间隙：

使用 g-* 类使列/行之间的间距相等
gx-* gy-* 类使列/行之间的间距不同

<div class="row g-2">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

文档：https://getbootstrap.com/docs/5.0/layout/gutters/

- Alex Shepel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Utpal - Ur Best Pal · Accepted Answer

我遇到了同样的问题；以下方法对我很有效。

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

这将自动在两个div之间呈现一些空间。

输入图像描述