Bootstrap：移动显示器上列之间的间隙

Question

我正在使用bootstrap 3.0做一个网站，我希望在桌面，平板电脑和移动设备上整齐地看到HTML和CSS。

我遇到的一个问题是，当您在移动显示器上查看该网站时，该列是堆叠的（我不批评这一点，因为这会尽可能地停止滚动）。但是，我希望列之间有一点差距（甚至1-2px）。

到目前为止的代码

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-8">
        <div class="Columns">
        ..content 
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-4">
        <div class="Columns">
        ..content
        </div>
    </div>
</div>

显示正在执行的操作以及显示堆栈列的图像

如何在列之间实现一点差距？

由于

Answer 1

添加自定义类.column-margin以设置行/列之间的边距。

@media (max-width: 991px) {
  .column-margin {
    margin: 2px 0;
  }
}

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-8">
    <div class="Columns column-margin">
      <img src="http://placehold.it/300x300" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-4">
    <div class="Columns">
      <img src="http://placehold.it/300x300" />
    </div>
  </div>
</div>

Codeply

Answer 2

为col-xs-12提供保证金，以便所有区块在移动设备中都有最低保证金。

@media (max-width: 767px) {
  .col-xs-12 {
    margin-bottom: 10px;
  }
}

Answer 3

要获得均匀的间距和列大小，我会执行以下操作:(注意：根据需要将col-md- *更改为col-sm- *或col-xs- *）

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