2.3.5 列偏移

有时候，我们不想让两个相邻的列挨在一起，可以使用栅格系统中列偏移功能来实现，而不必设置margin属性。其类为.offset-*和.offset-X-*。

.offset-*:*为数字1～11，表示向右偏移的列数。

.offset-X-*:X为设备宽度前缀sm、md、lg、xl。*为数字0～11。.offset-X-0，表示该宽度下不偏移。

同时，这里也需要注意，偏移列和显示列综合不能超过12。如果超过12，则换到下一行。

【实例2-6】（文件offsetgrid1.java）

<div class=＂row＂>
    <div class=＂col-md-4＂>.col-md-4</div>
    <div class=＂col-md-4 offset-md-4＂>.col-md-4 .offset-md-4</div>
</div>
<div class=＂row＂>
    <div class=＂col-md-3 offset-md-3＂>.col-md-3 .offset-md-3</div>
    <div class=＂col-md-3 offset-md-3＂>.col-md-3 .offset-md-3</div>
</div>
<div class=＂row＂>
    <div class=＂col-md-6 offset-md-3＂>.col-md-6 .offset-md-3</div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-12所示。

图2-12 列的偏移

【实例2-7】（文件setgrid2.java）

<div class=＂container＂>
    <div class=＂row＂>
        <div class=＂col-sm-5 col-md-6＂>.col-sm-5 .col-md-6</div>
        <div class=＂col-sm-5 offset-sm-2 col-md-6 offset-md-0＂>
            .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
        </div>
    </div>
    <div class=＂row＂>
        <div class=＂col-sm-6 col-md-5 col-lg-6＂>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class=＂col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0＂>
        .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6  .offset-lg-0
    </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-13所示。

图2-13 中屏显示效果

说明：在中屏显示时，第1行因为用了.offset-md-0，所以不偏移。小屏显示时会偏移。第2行，中屏显示时偏移2格，大屏设备显示时不偏移。读者可以自行查看效果。