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

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

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

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

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

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

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

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

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

希望能有所帮助;)

我必须弄清楚如何对3列做这个。我想绕过divs的角落，但无法获得空间的工作。我用了边距。在我的例子中，我认为90%的屏幕由div填充，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%更改为宽度:92.5%;在@media下(max-width:1023px)