Bootstrap 3 Grid System 中的偏移列是什么?

在 Bootstrap 3 的 Grid System 中，使用偏移列可以让我们在布局页面时更加灵活和自由。偏移列允许我们在某一列内，将该列的位置偏移一定的列数，从而实现更加多样的布局效果。下面我们具体介绍一下 Bootstrap 3 的偏移列用法。

偏移列的用法

在 Bootstrap 3 中，偏移列使用的类以 "col-" 开头，后面跟着偏移的列数，例如 "col-md-offset-2"。其中，"md" 表示 medium 设备的屏幕宽度。同样的，我们也可以用 "sm" 表示 small 设备的屏幕宽度，用 "lg" 表示 large 设备的屏幕宽度。接下来我们看一个例子，演示偏移列的用法：

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <p>这是一个占据 8 列的列，但是它被偏移了 2 列。</p>
    </div>
  </div>
</div>

在这个例子中，我们创建了一个占据 8 列的列，并将它的位置向右偏移了 2 列。这意味着该列的左边框边缘距离父级容器左边框边缘的距离为两列宽度。这里需要注意的是，父级容器的宽度是 12 列，因此如果一个列的宽度为 8 列，则剩下的空间为 4 列。

偏移列的规则

在使用偏移列时，我们需要注意以下几点规则：

1. 偏移的列数必须小于该列的宽度占据的列数。
2. 偏移的列数必须是正整数。
3. 偏移列数不能超过 11 列。因为当一个列的宽度占据 12 列时，它已经占满了整个父级容器，没有剩余的空间可以偏移。

总结

偏移列是 Bootstrap 3 Grid System 中用于布局页面的重要组成部分。通过使用偏移列，我们可以更加灵活地调整页面的布局效果，实现更多样的页面布局。只要掌握了偏移列的用法和规则，便可以轻松应对各种布局需求。