html - Bootstrap : how to add vertical offset in columns?

Question

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

bootstrap 库中是否有任何类可以使用我们达到预期的结果。

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>