怎樣制作免費網(wǎng)站,延邊手機(jī)網(wǎng)站建設(shè)開發(fā),西安建設(shè)局網(wǎng)站首頁,江西營銷型網(wǎng)站建設(shè)負(fù)margin揭秘#xff1a;Bootstrap布局中row與container-fluid的隱藏技巧 負(fù)margin揭秘#xff1a;Bootstrap布局中row與container-fluid的隱藏技巧先別暈#xff0c;負(fù)margin不是“黑魔法”Bootstrap柵格系統(tǒng)#xff1a;三件套的分工八卦負(fù)margin到底背了什么鍋#xff1…負(fù)margin揭秘Bootstrap布局中row與container-fluid的隱藏技巧負(fù)margin揭秘Bootstrap布局中row與container-fluid的隱藏技巧先別暈負(fù)margin不是“黑魔法”Bootstrap柵格系統(tǒng)三件套的分工八卦負(fù)margin到底背了什么鍋container vs container-fluid一張圖看懂“精裝”和“毛坯”row的負(fù)margin天生我材必有用實戰(zhàn)讓卡片“破圈”出血錯誤示范正確姿勢借負(fù)margin一用踩坑實錄那些年負(fù)margin搞出的血案開發(fā)小妙招用Sass變量一鍵改天換地組合拳padding、box-sizing、響應(yīng)式斷點1. padding當(dāng)“內(nèi)氣墊”2. box-sizing別讓小數(shù)點逼死強(qiáng)迫癥3. 響應(yīng)式斷點出血也要分場合自己造輪子30行代碼寫超簡柵格收個尾負(fù)margin不是妖精是田螺姑娘負(fù)margin揭秘Bootstrap布局中row與container-fluid的隱藏技巧“兄弟別急著給row寫overflow:hidden先聽我把負(fù)margin這杯酒喝完?！薄炒蜟ode Review里我按住同事即將合并的PR如是說道。先別暈負(fù)margin不是“黑魔法”第一次看Bootstrap源碼我也一臉懵.row左右那倆-15px是什么鬼像極了小時候偷吃辣條被我媽發(fā)現(xiàn)一邊擦嘴一邊還留半截在嘴角——欲蓋彌彰。可就是這半截“負(fù)margin”讓Bootstrap的柵格系統(tǒng)既能貼著屏幕邊緣撒野又能在容器里乖乖對齊。今天咱們就把這截辣條扯出來從辣椒籽到保鮮袋嚼得明明白白。Bootstrap柵格系統(tǒng)三件套的分工八卦在Bootstrap里容器、行、列就像一家三口.container/container-fluid——爸負(fù)責(zé)給全家買房決定是精裝小戶型固定寬度還是曠野別墅全屏。.row——媽持家能手左右騰挪讓娃們既不越界也不擠兌。.col-*——娃各占一床位床頭貼海報內(nèi)容床底塞零食padding。負(fù)margin的故事就發(fā)生在爸媽的“墻”上——左右margin。媽row為了把娃的床col對齊到爸container的墻根不得不自己先“探出”15 cm再讓娃往回收15 cm。于是視覺上娃的海報剛好貼在墻磚縫絲毫不差。負(fù)margin到底背了什么鍋先看一段極簡源碼Bootstrap 5 Sass版// _variables.scss $grid-gutter-width: 30px; // 15px * 2 // _grid.scss .container, .container-fluid { padding-left: $grid-gutter-width * 0.5; // 15px padding-right: $grid-gutter-width * 0.5; } .row { margin-left: -$grid-gutter-width * 0.5; // -15px margin-right: -$grid-gutter-width * 0.5; } .col { padding-left: $grid-gutter-width * 0.5; // 15px padding-right: $grid-gutter-width * 0.5; }代碼短套路深容器先給左右padding:15px讓內(nèi)容別貼邊。row反手一個-15px把左右“白邊”吃掉回到瀏覽器邊緣。col再加回15px讓內(nèi)容重新?lián)碛泻粑鼨?quán)。于是視覺對齊了代碼卻一點沒累。就像老板讓你9點到你8:59打卡他9:01出現(xiàn)時間都對誰也沒遲到。container vs container-fluid一張圖看懂“精裝”和“毛坯”!-- 精裝房固定寬度 居中 --divclasscontainerdivclassrowdivclasscol-12我最大寬度是1140pxxl斷點/div/div/div!-- 毛坯房全屏 --divclasscontainer-fluiddivclassrowdivclasscol-12我隨屏幕搖擺2560px也不在話下/div/div/div二者唯一區(qū)別是max-width。container在各斷點有固定值container-fluid永遠(yuǎn)是width:100%。負(fù)margin在誰身上——都在row身上。所以“全屏出血”效果靠container-fluid而真正貼邊靠的是row的負(fù)margin。別再冤枉container-fluid它只是個提供舞臺的真正跳舞的是row。row的負(fù)margin天生我材必有用為什么row不干脆把padding設(shè)成0因為col需要padding來撐開間隙間隙必須存在于col的“盒子里”才能讓背景、邊框、陰影都往里縮。如果row不做“負(fù)向拉扯”col的padding會讓整體縮進(jìn)去內(nèi)容永遠(yuǎn)對不齊容器邊界。負(fù)margin就像row的“反向臂展”先把舞臺拉大再讓col在舞臺里整齊站位。一句話row的負(fù)margin是col padding的鏡像宇宙。實戰(zhàn)讓卡片“破圈”出血需求在container里正常排版但首張卡片要全屏寬像輪播圖那樣頂?shù)綖g覽器兩邊。錯誤示范/* 別這么干滾動條會教你做人 */.full-bleed{width:100vw;margin-left:calc(-50vw 50%);}滾動條蹦迪移動端直接原地爆炸。正確姿勢借負(fù)margin一用// style.scss $gutter: 15px; .full-bleed { margin-left: -$gutter; margin-right: -$gutter; // 如果想再出去一點可以乘斷點倍數(shù) include media-breakpoint-up(md) { margin-left: -$gutter * 2; margin-right: -$gutter * 2; } }divclasscontainerdivclassrowdivclasscol-12 full-bleeddivclasscard rounded-0 border-0!-- 輪播圖、超大banner隨便放 --imgsrchero.jpgclassw-100althero/div/div/div/div原理row已經(jīng)自帶-15px我們在col上再“借”一次就能突破container的padding。注意借多少得還別一口氣-200px滾動條又會出來收利息。踩坑實錄那些年負(fù)margin搞出的血案橫向滾動條原因row的直接父級不是container而是自定義的div.wrapper沒給padding。解決給wrapper補(bǔ)padding:0 15px或者讓row退潮margin:0。內(nèi)容被截原因row外套了overflow:hidden的盒子負(fù)margin部分被切。解決把overflow:hidden往下移別套在row爸爸身上。對齊錯亂原因手動給col寫了margin-left:-15px和row的負(fù)margin疊加列直接疊羅漢。解決別在col上再寫負(fù)margincol只負(fù)責(zé)padding。排查三字經(jīng)父paddingrow負(fù)col別手癢。先查父再查子overflow最后試。開發(fā)小妙招用Sass變量一鍵改天換地// custom.scss import ~bootstrap/scss/bootstrap; $grid-gutter-width: 40px; // 想搞大間隙 // 重新生成row和container .container, .container-fluid { padding-left: $grid-gutter-width * 0.5; padding-right: $grid-gutter-width * 0.5; } .row { margin-left: -$grid-gutter-width * 0.5; margin-right: -$grid-gutter-width * 0.5; } .col { padding-left: $grid-gutter-width * 0.5; padding-right: $grid-gutter-width * 0.5; }一行變量全局換裝。以后產(chǎn)品經(jīng)理說“間隙再大點”你只需要改40px不用全局搜索-15px。組合拳padding、box-sizing、響應(yīng)式斷點1. padding當(dāng)“內(nèi)氣墊”.card-special { padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }負(fù)margin負(fù)責(zé)“破墻”padding負(fù)責(zé)“回彈”二者配合視覺出血內(nèi)容不貼邊。2. box-sizing別讓小數(shù)點逼死強(qiáng)迫癥*, *::before, *::after{box-sizing:border-box;}Bootstrap 5已經(jīng)全局設(shè)置自研系統(tǒng)別忘加否則width:100%padding會撐破容器。3. 響應(yīng)式斷點出血也要分場合.bleed-sm-only { include media-breakpoint-up(md) { margin-left: 0; margin-right: 0; } }移動端全屏爽桌面端乖乖對齊一斷點一世界。自己造輪子30行代碼寫超簡柵格理解了負(fù)margin你就可以甩掉Bootstrap手寫一個12列系統(tǒng)代碼少得可憐// mini-grid.scss $gutter: 15px; $cols : 12; .container { max-width: 1140px; margin: 0 auto; padding: 0 $gutter; } .row { display: flex; flex-wrap: wrap; margin: 0 (-$gutter); } .col { flex: 1; padding: 0 $gutter; } for $i from 1 through $cols { .col-#{$i} { flex: 0 0 percentage($i / $cols); max-width: percentage($i / $cols); padding: 0 $gutter; } }divclasscontainerdivclassrowdivclasscol-8主內(nèi)容/divdivclasscol-4側(cè)邊欄/div/div/div30行零依賴想改間隙改間隙想改列數(shù)改列數(shù)。負(fù)margin還是那倆-15px但此刻你已經(jīng)從“使用者”升級為“造物主”。收個尾負(fù)margin不是妖精是田螺姑娘別再談負(fù)margin色變。它不過是個默默干臟活累活的田螺姑娘凌晨三點你呼呼大睡它悄悄把row的左右拉回瀏覽器邊緣讓col的padding呼吸順暢清晨上線頁面整齊劃一你卻不知道是誰在背后偷笑。下次Code Review如果再看到同事寫.row{overflow:hidden;}請你把這篇文章甩給他然后拍拍他的肩“兄弟別殺田螺姑娘她只是想讓你對齊。”歡迎來到我的博客很高興能夠在這里和您見面希望您在這里可以感受到一份輕松愉快的氛圍不僅可以獲得有趣的內(nèi)容和知識也可以暢所欲言、分享您的想法和見解。推薦DTcode7的博客首頁。一個做過前端開發(fā)的產(chǎn)品經(jīng)理經(jīng)歷過睿智產(chǎn)品的折磨導(dǎo)致脫發(fā)之后勵志要翻身農(nóng)奴把歌唱一邊打入敵人內(nèi)部一邊持續(xù)提升自己為我們廣大開發(fā)同胞謀福祉堅決抵制睿智產(chǎn)品折磨我們碼農(nóng)兄弟專欄系列點擊解鎖學(xué)習(xí)路線(點擊解鎖知識定位《微信小程序相關(guān)博客》持續(xù)更新中~結(jié)合微信官方原生框架、uniapp等小程序框架記錄請求、封裝、tabbar、UI組件的學(xué)習(xí)記錄和使用技巧等《AIGC相關(guān)博客》持續(xù)更新中~AIGC、AI生產(chǎn)力工具的介紹例如stable diffusion這種的AI繪畫工具安裝、使用、技巧等總結(jié)《HTML網(wǎng)站開發(fā)相關(guān)》《前端基礎(chǔ)入門三大核心之html相關(guān)博客》前端基礎(chǔ)入門三大核心之html板塊的內(nèi)容入坑前端或者輔助學(xué)習(xí)的必看知識《前端基礎(chǔ)入門三大核心之JS相關(guān)博客》前端JS是JavaScript語言在網(wǎng)頁開發(fā)中的應(yīng)用負(fù)責(zé)實現(xiàn)交互效果和動態(tài)內(nèi)容。它與HTML和CSS并稱前端三劍客共同構(gòu)建用戶界面。通過操作DOM元素、響應(yīng)事件、發(fā)起網(wǎng)絡(luò)請求等JS使頁面能夠響應(yīng)用戶行為實現(xiàn)數(shù)據(jù)動態(tài)展示和頁面流暢跳轉(zhuǎn)是現(xiàn)代Web開發(fā)的核心《前端基礎(chǔ)入門三大核心之CSS相關(guān)博客》介紹前端開發(fā)中遇到的CSS疑問和各種奇妙的CSS語法同時收集精美的CSS效果代碼用來豐富你的web網(wǎng)頁《canvas繪圖相關(guān)博客》Canvas是HTML5中用于繪制圖形的元素通過JavaScript及其提供的繪圖API開發(fā)者可以在網(wǎng)頁上繪制出各種復(fù)雜的圖形、動畫和圖像效果。Canvas提供了高度的靈活性和控制力使得前端繪圖技術(shù)更加豐富和多樣化《Vue實戰(zhàn)相關(guān)博客》持續(xù)更新中~詳細(xì)總結(jié)了常用UI庫elementUI的使用技巧以及Vue的學(xué)習(xí)之旅《python相關(guān)博客》持續(xù)更新中~Python簡潔易學(xué)的編程語言強(qiáng)大到足以應(yīng)對各種應(yīng)用場景是編程新手的理想選擇也是專業(yè)人士的得力工具《sql數(shù)據(jù)庫相關(guān)博客》持續(xù)更新中~SQL數(shù)據(jù)庫高效管理數(shù)據(jù)的利器學(xué)會SQL輕松駕馭結(jié)構(gòu)化數(shù)據(jù)解鎖數(shù)據(jù)分析與挖掘的無限可能《算法系列相關(guān)博客》持續(xù)更新中~算法與數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié)通過JS來編寫處理復(fù)雜有趣的算法問題提升你的技術(shù)思維《IT信息技術(shù)相關(guān)博客》持續(xù)更新中~作為信息化人員所需要掌握的底層技術(shù)涉及軟件開發(fā)、網(wǎng)絡(luò)建設(shè)、系統(tǒng)維護(hù)等領(lǐng)域的知識《信息化人員基礎(chǔ)技能知識相關(guān)博客》無論你是開發(fā)、產(chǎn)品、實施、經(jīng)理只要是從事信息化相關(guān)行業(yè)的人員都應(yīng)該掌握這些信息化的基礎(chǔ)知識可以不精通但是一定要了解避免日常工作中貽笑大方《信息化技能面試寶典相關(guān)博客》涉及信息化相關(guān)工作基礎(chǔ)知識和面試技巧提升自我能力與面試通過率擴(kuò)展知識面《前端開發(fā)習(xí)慣與小技巧相關(guān)博客》持續(xù)更新中~羅列常用的開發(fā)工具使用技巧,如 Vscode快捷鍵操作、Git、CMD、游覽器控制臺等《photoshop相關(guān)博客》持續(xù)更新中~基礎(chǔ)的PS學(xué)習(xí)記錄含括PPI與DPI、物理像素dp、邏輯像素dip、矢量圖和位圖以及幀動畫等的學(xué)習(xí)總結(jié)日常開發(fā)辦公生產(chǎn)【實用工具】分享相關(guān)博客》持續(xù)更新中~分享介紹各種開發(fā)中、工作中、個人生產(chǎn)以及學(xué)習(xí)上的工具豐富閱歷給大家提供處理事情的更多角度學(xué)習(xí)了解更多的便利工具如Fiddler抓包、辦公快捷鍵、虛擬機(jī)VMware等工具吾輩才疏學(xué)淺摹寫之作恐有瑕疵。望諸君海涵賜教。望輕噴嚶嚶嚶非常期待和您一起在這個小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長。愿斯文對汝有所裨益縱其簡陋未及淵博亦足以略盡綿薄之力。倘若尚存闕漏敬請不吝斧正俾便精進(jìn)