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

【问题标题】：Bootstrap: how to add vertical offset in columns?Bootstrap：如何在列中添加垂直偏移？
【发布时间】：2016-12-22 21:28:58
【问题描述】：

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

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

Refer fiddle

电流输出，

预期结果，

【问题讨论】：

目前在 Bootstrap 3 中没有垂直偏移作为标准可用。在 Bootstrap 3 中添加垂直偏移顶部和底部以在列中使用
为您的代码添加 css ".col-sm-offset-1{ margin-top: 1em;}" jsfiddle
您需要使用margin-top属性，没有其他选项可以设置垂直偏移。

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案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>

【讨论】：

这是我能做的最好的，因为没有可用于设置垂直偏移的类。

【解决方案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;
  }
}

对我来说效果很好:)

【讨论】：

【解决方案3】：

试试这样

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

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

【讨论】：

谢谢，但这会为第一行添加不必要的 margin-top。在大屏幕分辨率下也是如此。即使我尝试使用 - gist.github.com/erobert17/9139147 我想我也必须使用媒体查询。