我知道这篇文章有点过时，但我遇到了同样的问题。我的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>

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

我是这么做的……

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

我希望这能帮助到其他人。

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

我在列之间的空间方面也遇到过类似的问题。根本问题是自举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，我们称之为“raise -block”，必须是列的直接兄弟

这样，您仍然可以在列中获得适当的填充。我见过通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行两侧有额外的填充，因此最终使行变得更薄，网格布局是为之设计的。如果你想要看到你想要的样子，这意味着两列加在一起会比上面的一列更小，这打破了网格的自然结构。

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

既然你在使用bootstrap，我猜你想让它有响应性。在这种情况下，你不应该使用固定的大小，例如'px'。

作为其他解决方案的变通方案，我建议将两列都设为“col-md-5”而不是“col-md-6”，然后在包含列的父元素“row”中，添加类“justice -content-between”，这将把空闲空间放在中间，就像你可以在bootstrap文档中检查的那样

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

希望能有所帮助;)

这也是一种方法。请查看以下网址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>

我也面临着同样的问题;下面的方法对我很有效。

<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之间渲染一些空间。