課程
/前端開發
/Bootstrap
/玩轉Bootstrap(基礎)
col-md-push-*和col-md-offset-* 的區別是什么呢?
2017-02-17
源自:玩轉Bootstrap(基礎) 4-5
正在回答
根據《深入理解bootstrap一書》中,offset原理是用了margin-left來實現的偏移,而pull和push是用的float。
offset是通過設置margin-left,它只能向右偏移,不能交換位置,一行加起來不能超過12push,pull是通過設置right,left實現定位效果,改變位置,一列加起來不能超過12
你這樣理解 ?col-sm-offset是通過margin來實現的 ?你位移的距離同樣占據著位置 ?而push和pull并沒有使用margin ?是純位置轉移。
實現方式的區別: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可以用來給元素換位置,比較靈活。
個人觀點,望采納。
我認為一個是按浮動定位,一個是按position:的left,right來定位.
首先來說他倆作用上的區別是:push是進行列排序用的,offset是進行列偏移的。
再來看看他們倆效果上的不同:push配套使用的是.col-md-pull-*,push是放在后面,pull是放在前面,列之間不會有間距。 ??offset是該列向后偏移多少列,該列會與前一列產生間距地。這是我總結的,你也可以根據http://v3.bootcss.com/css/#grid。官網上的,結合自己的測試來實際體驗一下。
大半夜手打不易,求采納。萬分感謝!?。?/p>
舉報
告訴你使用Bootstrap,并且能夠獨立定制出適合自己的Bootstrap
6 回答col-xs col-sm col-md 這幾個的區別
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號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-07-19
根據《深入理解bootstrap一書》中,offset原理是用了margin-left來實現的偏移,而pull和push是用的float。
2017-05-10
offset是通過設置margin-left,它只能向右偏移,不能交換位置,一行加起來不能超過12
push,pull是通過設置right,left實現定位效果,改變位置,一列加起來不能超過12
2017-04-17
你這樣理解 ?col-sm-offset是通過margin來實現的 ?你位移的距離同樣占據著位置 ?而push和pull并沒有使用margin ?是純位置轉移。
2017-03-07
實現方式的區別: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-03
我認為一個是按浮動定位,一個是按position:的left,right來定位.
2017-02-17
首先來說他倆作用上的區別是:push是進行列排序用的,offset是進行列偏移的。
再來看看他們倆效果上的不同:push配套使用的是.col-md-pull-*,push是放在后面,pull是放在前面,列之間不會有間距。 ??offset是該列向后偏移多少列,該列會與前一列產生間距地。這是我總結的,你也可以根據http://v3.bootcss.com/css/#grid。官網上的,結合自己的測試來實際體驗一下。
大半夜手打不易,求采納。萬分感謝!?。?/p>