我敢肯定有一个解决此问题的简单方法。基本上，如果我有两列，如何在它们之间添加一个空格？

例如，如果html是：

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

输出将是彼此相邻的两列，占据了页面的整个宽度。假设将宽度设置为，1000px则每个div都会很500px宽。

如果我想在100px两者之间留出空间，该如何实现？显然，通过引导程序自动使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="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之间渲染一些空间。

我知道我参加聚会迟到了，但是您可以尝试用填充物将盒子隔开。

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

去吧

您可以使用带有背景边框的background-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>

我在列之间的空间也有类似的问题。根本问题是引导程序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带有负的边距，就像“ row”类引导程序使用的那样。这个div（我们称为“凸起块”）必须是列的直接同级

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

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

这将在两列之间留出空间，并且显然，如果您想更改默认宽度，可以使用mixins来修改默认的引导程序宽度。或者，您可以使用内联CSS样式指定宽度。

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

您可以使用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>

使用引导程序的.form-group类。在您的情况下是这样的：

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

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

在col-md-？内，创建另一个div并将图片放在该div中，这样您就可以轻松地添加填充。

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>

Bootstrap 4，文件custom.scss，您可以添加以下代码：

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

默认情况下$ grid-gutter-width-base：30px;

我必须弄清楚如何针对3列进行此操作。我想绕过div的角落，无法获得足够的间距。我用边距。就我而言，我认为div会填充90％的屏幕，而边距则为10％：

的HTML：

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

和CSS：

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

为了使正确调整大小的移动设备，我有CSS由30％变更宽度width:92.5%;下@media (max-width:1023px)

由于您使用的是引导程序，所以我想您想使该程序具有响应性。在这种情况下，您不应使用固定大小，例如“ px”。

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

当然，此解决方案对于调整“ col-md-x”的两列以上也是有效的

希望能帮助到你 ;）

很简单..您必须在右边添加实线边框，在col- *左边添加，这应该可行

它看起来像这样：http : //i.stack.imgur.com/CF5ZV.png

HTML：

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS：

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}

我知道这篇文章过时了，但是我遇到了同样的问题。我的HTML示例。

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

为了在组之间创建空间，我通过将负边距减小5来覆盖site.css文件中引导区的-15px边距。

这是我做的...

.form-group {
    margin-right: -10px;
}

我希望这对其他人有帮助。

我需要在移动设备上放置一列，在平板电脑纵向上需要两列，中间的间距相等（各列之间也没有添加网格的填充）。可以通过使用间距实用程序并省略以下数字来实现col-md：

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

仅使用CSS添加与背景颜色相同的边框怎么样？我对此并不陌生，所以也许有充分的理由不这样做，但是当我尝试时看起来不错。

为了获得列之间的特定间距宽度，我们必须padding在标准的Bootstrap布局中进行设置。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}

<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

这将是有用的。

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }

<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

如果要在框的右侧增加或减少边距，则只需编辑list-item的margin-right属性。

样本输出

包装元素周围只有白色边框

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

    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}

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

默认情况下，这会以您似乎需要的方式在外部div内提供一些填充。此外，您还可以使用自定义CSS修改填充。

简单方法

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

引导程序4

文档说（在这里）：

行是列的包装。每列都有水平填充（称为装订线），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充。这样，列中的所有内容在视觉上都在左侧向下对齐。

因此正确的答案是：将cols的padding-left / right等于减去您row的margin-left / right。这么简单。

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

演示：https : //codepen.io/frouo/pen/OqGaWN

Bootstrap 4-使用嵌套行分隔列。

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

创建一个类并使用：

保证金：1.5em .5em; 最大宽度：calc（50％-1em）！important;

其中最大宽度上的1em等于左/右边界相加。

这也是它及其工作的一种方式。请检查以下网址https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>

使用margin-left是方法：

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

完美运作

在最新的引导程序版本中，您可以使用“卡片”