如何在Bootstrap中的列之间添加间距？

Question

我确信这个问题有一个简单的解决方案.基本上,如果我有两列,我怎么能在它们之间添加空格？

例如,如果html是:

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

输出只是两列,彼此相邻,占据了页面的整个宽度.假设宽度设置为1000px每个div 都很500px宽.

如果我想要100px两者之间的空间我怎么能实现这个？显然,通过bootstrap自动调整div大小450px以补偿空间

Answer 1

我面临同样的问题; 以下对我来说效果很好.希望这有助于有人登陆:

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

这将自动在2个div之间渲染一些空格.

Answer 2

您可以使用col-md-offset-*这里记录的类来实现列之间的间距.间距是一致的,以便您的所有列正确排列.为了获得均匀的间距和列大小,我将执行以下操作:

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

Answer 3

我知道我迟到了,但你可以尝试用填充物来隔开盒子.

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

去吧

Answer 4

列之间的空间也有类似的问题.根本问题是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,就像"行"类引导程序一样.而这个div,我们称之为"凸起块",必须是一个专栏的直接兄弟

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

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

Answer 5

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

Answer 6

你可以使用带边框属性的bac​​kground-clip和box-model

.box{
  box-model: 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>

Answer 7

这将允许两列之间的空间,显然如果你想改变默认宽度,你可以去mixins修改默认的bootstrap宽度.或者,您可以使用内联CSS样式给出宽度.

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

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

Answer 9

使用bootstrap的.form-group类.在你的情况下像这样:

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

Answer 10

bootstrap 5 提供了一种更舒适的方式来添加间隙：

1. 使用g-*类使列/行间距相等
2. 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/

Answer 11

由于您使用的是bootstrap，我猜您想让它具有响应性。在这种情况下，您不应该使用固定尺寸，例如“px”。

作为其他解决方案的解决方法，我建议将两列都设为“col-md-5”而不是“col-md-6”，然后在包含这些列的父元素“row”中，添加类“justify-content -between”，将可用空间放在中间，因为您可以在此处查看引导程序文档

此解决方案当然也适用于调整“col-md-x”的两列以上

希望能帮助到你 ;）