html - Bootstrap 在列之间添加空间

Question

我已经密切关注the most popular example如何在列之间添加空间，但它不起作用。您可以在

查看它的运行情况

codepen.io

我所做的是在每一列的 col-sm-4 中放置一个 col-sm-12。根据most popular answer here这应该会自动在 2 个 div 之间呈现一些空间。

HTML:

<div class="row blocks-grid">
  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>  
</div>

CSS:

body {
  background: #BEB7A4;
}
.blocks-grid {
  max-width:75.0rem; 
  margin:0 auto;
  .item {
    cursor: pointer;
    margin-bottom:1rem;
    position:relative;
    height:34.0rem;
    padding-top:2.5rem;
    background:#FFFFFC;
    &:hover {
      background:#FF0000;
      color:white;
      img {
        display:none;
      }
    }
    h2 {
      font-size:2.0rem;
      margin-top:1rem;
      text-align: center;
    }    
    img {
      max-width: 100%;
      margin:auto;
      display:block;
    }
  }
}

基本上，我认为结果会像下面的照片，但事实并非如此:

Answer 1

你可以试试这个:Demo

用“col-sm-12”添加你的“item”类

body {
  background: #BEB7A4;
}