我有两列:

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

我怎么在它们之间加一个空格?

输出只是两个相邻的列,占据了整个页面的宽度。假设宽度设置为1000px,那么每个div将是500px宽。

如果我想在两者之间有一个100px的空间,我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。


当前回答

您可以使用此处文档中的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

其他回答

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

默认情况下,这在外部div中提供了一些填充,这是您需要的方式。此外,您还可以使用自定义CSS修改填充。

你可以使用colx -xs-*类来实现列与列之间的间隔,在下面编码的colx -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>

环绕元素的白色边框

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

第一个+最后一个孩子没有边界

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>

使用bootstrap的.form-group类。你的情况是这样的:

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

Bootstrap 5提供了一种使用g-*类添加cols间隙的更舒适的方法

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

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