在使用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:脱离文档流,向左浮动