課程
/前端開(kāi)發(fā)
/Bootstrap
/玩轉(zhuǎn)Bootstrap(基礎(chǔ))
col-md-push-*和col-md-offset-* 的區(qū)別是什么呢?
2017-02-17
源自:玩轉(zhuǎn)Bootstrap(基礎(chǔ)) 4-5
正在回答
根據(jù)《深入理解bootstrap一書》中,offset原理是用了margin-left來(lái)實(shí)現(xiàn)的偏移,而pull和push是用的float。
offset是通過(guò)設(shè)置margin-left,它只能向右偏移,不能交換位置,一行加起來(lái)不能超過(guò)12push,pull是通過(guò)設(shè)置right,left實(shí)現(xiàn)定位效果,改變位置,一列加起來(lái)不能超過(guò)12
你這樣理解 ?col-sm-offset是通過(guò)margin來(lái)實(shí)現(xiàn)的 ?你位移的距離同樣占據(jù)著位置 ?而push和pull并沒(méi)有使用margin ?是純位置轉(zhuǎn)移。
實(shí)現(xiàn)方式的區(qū)別:col-md-offset-*,是利用margin-left實(shí)現(xiàn)的,col-md-push-*/col-md-pull-*是利用相對(duì)定位實(shí)現(xiàn)的。
效果的區(qū)別,col-md-offset-*只能向右便宜,因?yàn)閷?shí)現(xiàn)方式就是margin-left,而push/pull因?yàn)槭窍鄬?duì)定位,既可以左偏移也可以右偏移
還有一點(diǎn),如果一行的偏移量+實(shí)際的寬度綜合超過(guò)12,col-md-offset會(huì)換行顯示,也是因?yàn)閙argin,而push/pull只會(huì)一部分不可見(jiàn)(超出容器),因?yàn)槭窍鄬?duì)自身定位。
從功能上來(lái)看,push和pull可以用來(lái)給元素?fù)Q位置,比較靈活。
個(gè)人觀點(diǎn),望采納。
我認(rèn)為一個(gè)是按浮動(dòng)定位,一個(gè)是按position:的left,right來(lái)定位.
首先來(lái)說(shuō)他倆作用上的區(qū)別是:push是進(jìn)行列排序用的,offset是進(jìn)行列偏移的。
再來(lái)看看他們倆效果上的不同:push配套使用的是.col-md-pull-*,push是放在后面,pull是放在前面,列之間不會(huì)有間距。 ??offset是該列向后偏移多少列,該列會(huì)與前一列產(chǎn)生間距地。這是我總結(jié)的,你也可以根據(jù)http://v3.bootcss.com/css/#grid。官網(wǎng)上的,結(jié)合自己的測(cè)試來(lái)實(shí)際體驗(yàn)一下。
大半夜手打不易,求采納。萬(wàn)分感謝?。?!
舉報(bào)
告訴你使用Bootstrap,并且能夠獨(dú)立定制出適合自己的Bootstrap
6 回答col-xs col-sm col-md 這幾個(gè)的區(qū)別
2 回答col-xs-6 col-md-3
4 回答col-xs-6 col-md-3
1 回答col-xs-6 col-md-3
3 回答col-md-X 與col-sm-X
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-07-19
根據(jù)《深入理解bootstrap一書》中,offset原理是用了margin-left來(lái)實(shí)現(xiàn)的偏移,而pull和push是用的float。
2017-05-10
offset是通過(guò)設(shè)置margin-left,它只能向右偏移,不能交換位置,一行加起來(lái)不能超過(guò)12
push,pull是通過(guò)設(shè)置right,left實(shí)現(xiàn)定位效果,改變位置,一列加起來(lái)不能超過(guò)12
2017-04-17
你這樣理解 ?col-sm-offset是通過(guò)margin來(lái)實(shí)現(xiàn)的 ?你位移的距離同樣占據(jù)著位置 ?而push和pull并沒(méi)有使用margin ?是純位置轉(zhuǎn)移。
2017-03-07
實(shí)現(xiàn)方式的區(qū)別:col-md-offset-*,是利用margin-left實(shí)現(xiàn)的,col-md-push-*/col-md-pull-*是利用相對(duì)定位實(shí)現(xiàn)的。
效果的區(qū)別,col-md-offset-*只能向右便宜,因?yàn)閷?shí)現(xiàn)方式就是margin-left,而push/pull因?yàn)槭窍鄬?duì)定位,既可以左偏移也可以右偏移
還有一點(diǎn),如果一行的偏移量+實(shí)際的寬度綜合超過(guò)12,col-md-offset會(huì)換行顯示,也是因?yàn)閙argin,而push/pull只會(huì)一部分不可見(jiàn)(超出容器),因?yàn)槭窍鄬?duì)自身定位。
從功能上來(lái)看,push和pull可以用來(lái)給元素?fù)Q位置,比較靈活。
個(gè)人觀點(diǎn),望采納。
2017-03-03
我認(rèn)為一個(gè)是按浮動(dòng)定位,一個(gè)是按position:的left,right來(lái)定位.
2017-02-17
首先來(lái)說(shuō)他倆作用上的區(qū)別是:push是進(jìn)行列排序用的,offset是進(jìn)行列偏移的。
再來(lái)看看他們倆效果上的不同:push配套使用的是.col-md-pull-*,push是放在后面,pull是放在前面,列之間不會(huì)有間距。 ??offset是該列向后偏移多少列,該列會(huì)與前一列產(chǎn)生間距地。這是我總結(jié)的,你也可以根據(jù)http://v3.bootcss.com/css/#grid。官網(wǎng)上的,結(jié)合自己的測(cè)試來(lái)實(shí)際體驗(yàn)一下。
大半夜手打不易,求采納。萬(wàn)分感謝?。?!