Bootstrap：如何在列中添加垂直偏移量？

Question

Bootstrap提供了一个类col-sm-offset-*来在列之间添加空格。它在笔记本电脑屏幕上运行良好，但是当我们将屏幕分辨率更改为移动设备时，它会显示一个排列在另一个之下的列，没有空间。

bootstrap lib中是否有任何类可以实现预期的结果。

Refer fiddle

当前输出，

预期结果，

Answer 1

您可以向该特定div添加额外的类（任何名称）并使用给定的css。

.custom{
  margin-bottom:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-1</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-2</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-3</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-4</div>
</div>
</div>

Answer 2

有点晚了但不久前我遇到了这个：

https://gist.github.com/erobert17/9139147

具有垂直偏移的sass样式：

@for $i from 0 through 12 {
  .vert-offset-top-#{$i} {
    margin-top: #{$i}em;
  }

  .vert-offset-bottom-#{$i} {
    margin-bottom: #{$i}em;
  }
}

它对我来说效果很好:)）

Answer 3

试试这样

＆＃13;

＆＃13;

.col-sm-offset-1{
    margin-top: 1em;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-1</div>
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-2</div>
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-3</div>
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-4</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;