bootstrap中col-*-offset、col-*-push和col-*-pull的使用说明

在使用bootstrap做前端开发的时候，经常会用到列移动、列排列，那么对col--offset，col--push，col-*-pull一定不会陌生，下面对其使用说明做简单介绍。

首先看这3个英文单词的中文含义解释：

offset 本意：补偿（我们习惯叫做“偏移”），其实就是在左侧补列（1~11列）

push 推，不是补列，而是将元素向左浮动

pull 拉，将元素向右浮动

offset比较常见，下面主要看一下push和pull的对比效果

<div class="container" style="background-color:white;">
    <div class="row">
        <div class="col-md-1">1</div>
        <div class="col-md-1">2</div>
        <div class="col-md-1">3</div>
        <div class="col-md-1">4</div>
        <div class="col-md-1">5</div>
        <div class="col-md-1">6</div>
        <div class="col-md-1">7</div>
        <div class="col-md-1">8</div>
        <div class="col-md-1">9</div>
        <div class="col-md-1">10</div>
        <div class="col-md-1">11</div>
        <div class="col-md-1">12</div>
    </div>
    <div class="row">
        <div class="col-md-5">5</div>
        <div class="col-md-7">7</div>
    </div>
    <div class="row">
        <div class="col-md-5 col-md-push-1" style="border:1px solid blue;">5</div>
        <div class="col-md-7 col-md-pull-2">7</div>
    </div>
</div>

效果图：

由此可见，5被push了1格，即向右浮动了1格，7被pull了2格，即向左浮动了2格，盖住了5的后半部分（3格大小的范围）

总结：

offset：不脱离文档流，即在左侧填充补列，补空元素
push：脱离文档流，向右浮动
pull：脱离文档流，向左浮动