欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

col-md-push-*和col-md-offset的区别?

Bootstrap基础4-6章,列排序 pull和push在什么情况下使用??

 

1
2
3
4
5
6
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8">.col-md-4</div>
    <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  </div>
</div>

如果说在开发中需要col-md-4和ol-md-8交换位置,那写类的时候8在前,4在后不就可以了吗,还需要添加pull和push类吗,如果用js动态更改,同样也可以动态把4改成8,把8改成4啊,想不清楚,push和pull具体该怎么使用。。。

2015-03-08源自:玩转Bootstrap(基础)... 4-513149 浏览4 回答

同上回复正确,我也是这么理解的 push 是推过去  pull是拉回来 如果以左右为列的话  从左到右用push  从右往左用pull

2015-05-28
 回复  1
 
 

你理解成推和塞就会好理解一些。其实这样你需要自己动手一试就清楚了。

2015-03-10
 回复  0
 
 

姑且也只能这么理解了。目前只能慢慢学了!

2015-10-27
 回复  0
 
 

col-md-push-*和col-md-offset的区别?

col-md-push-*和col-md-offset-* 的区别是什么呢?

2017-02-17源自:玩转Bootstrap(基础)... 4-56308 浏览6 回答

首先来说他俩作用上的区别是:push是进行列排序用的,offset是进行列偏移的。

再来看看他们俩效果上的不同:push配套使用的是.col-md-pull-*,push是放在后面,pull是放在前面,列之间不会有间距。   offset是该列向后偏移多少列,该列会与前一列产生间距地。这是我总结的,你也可以根据http://v3.bootcss.com/css/#grid。官网上的,结合自己的测试来实际体验一下。

大半夜手打不易,求采纳。万分感谢!!!

2017-02-17
 回复  8
 
 

实现方式的区别:col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的。

效果的区别,col-md-offset-*只能向右便宜,因为实现方式就是margin-left,而push/pull因为是相对定位,既可以左偏移也可以右偏移

还有一点,如果一行的偏移量+实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。

从功能上来看,push和pull可以用来给元素换位置,比较灵活。

个人观点,望采纳。

2017-03-07
 回复  7
 
 

我认为一个是按浮动定位,一个是按position:的left,right来定位.

2017-03-03
 回复  1
 
 

你这样理解  col-sm-offset是通过margin来实现的  你位移的距离同样占据着位置  而push和pull并没有使用margin  是纯位置转移。

2017-04-17
 回复  0
 
 

offset是通过设置margin-left,它只能向右偏移,不能交换位置,一行加起来不能超过12
push,pull是通过设置right,left实现定位效果,改变位置,一列加起来不能超过12

2017-05-10
 回复  0
 
 

根据《深入理解bootstrap一书》中,offset原理是用了margin-left来实现的偏移,而pull和push是用的float。

来自 http://www.imooc.com/qadetail/199127


普通分类: