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

Question

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

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

参考小提琴

电流输出，

预期结果，

原文由 Rishi Vedpathak 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Sagar Kodte 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

它对我来说效果很好:)

原文由 surgiie 发布，翻译遵循 CC BY-SA 3.0 许可协议