BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法
最近的一個(gè)項(xiàng)目 前臺(tái)使用了 bootstrap.css + angularjs, 后臺(tái)只處理數(shù)據(jù)(用的php,處理結(jié)果直接 json_encode($arr),非常爽)。一直在Chrome的仿真機(jī)測(cè)試非常完美, 沒(méi)有進(jìn)行真機(jī)測(cè)試。完成后,到手機(jī)測(cè)試時(shí)傻了,左右滑動(dòng)頁(yè)面時(shí),竟然出現(xiàn)了一個(gè) 空白的豎條(如下圖所示)。判斷是margin-right 設(shè)置的長(zhǎng)度所致,檢查css,并沒(méi)有相關(guān)代碼??磥?lái)問(wèn)題出現(xiàn)在了 bootstrap 。雖然不影響 程序的使用,但是感覺(jué)非常別扭,一定要修復(fù)它。
檢查頁(yè)面,發(fā)現(xiàn)用柵格系統(tǒng)的頁(yè)面才會(huì)出現(xiàn)此問(wèn)題。檢查.row相關(guān)的css,發(fā)現(xiàn)它的margin定義如下:
.row{ margin-left:-15px; margin-right:-15px; }
.row 一般作為 container的下級(jí)元素、作為 .col-xx-xx的上級(jí)元素。順便查看下 .container 和 con-xx-xx的css:
.container{ padding-left:15px; padding-right:15px; } .col-xx-xx{ padding-left:15px; padding-right:15px; }
.container 的所有元素 內(nèi)邊距 都有 15px 的距離,顯得非常美觀,.col-xx-xx 也設(shè)置了內(nèi)邊距 15px。這樣就無(wú)法和 .contariner 的元素對(duì)齊了(.col-xx-xx相對(duì)于 .container的距離為30px),所以第一個(gè)柵格元素元素和最后一個(gè)柵格元素 需要分別設(shè)置為 {padding-left:0px;} 、{padding-right:0px;}。這樣解決了對(duì)齊的問(wèn)題,但是設(shè)置之后,雖然每個(gè)柵格的寬度一致,顯示的內(nèi)容的寬度又有了 15px 的差距。于是 FB 的天才們巧妙的 采用了 負(fù)數(shù)的外邊框的 解決方案,不僅代碼實(shí)現(xiàn)簡(jiǎn)單,還沒(méi)有 每個(gè) 柵格 顯示的內(nèi)容的寬度不一致的問(wèn)題。
雖然 負(fù)數(shù)的外邊框 這種解決方案好,但是在小屏幕(移動(dòng)端)會(huì)產(chǎn)生空白邊框的問(wèn)題(本文要解決的痛點(diǎn))。定制bootstrap解決這個(gè)問(wèn)題,但是太麻煩,最簡(jiǎn)單的方法就是復(fù)寫(xiě)相關(guān)的css。
/* 需要在 bootstrap.css 之后調(diào)用 */ /* Fuck 15px for iPhone Start */ .row{margin:0;} .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding:0;} /* Fuck 15px for iPhone Over */
成功解決,因?yàn)?柵格 沒(méi)有了 padding,每個(gè)柵欄的 寬度一致,顯示的內(nèi)容的寬度也一致,和 contrainer 的元素也能對(duì)齊(注意:這個(gè)后果也很?chē)?yán)重,就是每個(gè)柵格之間的內(nèi)容都連在一起了,在內(nèi)部的柵格重新定義內(nèi)邊距和內(nèi)容居中即可解決)。
以上所述是小編給大家介紹的BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法,希望對(duì)大家有所幫助!
相關(guān)文章
使用js操作css實(shí)現(xiàn)js改變背景圖片示例
有個(gè)朋友在weibo上問(wèn)我可不可以用JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖,當(dāng)然是可以的。具體的方法看下面的實(shí)現(xiàn)代碼吧2014-03-03js實(shí)現(xiàn)密碼強(qiáng)度檢驗(yàn)
這篇文章主要為大家詳細(xì)介紹了js密碼強(qiáng)度檢驗(yàn)的實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01uniapp微信小程序無(wú)法獲取Vue.prototype值的解決方法
在uniapp開(kāi)發(fā)過(guò)程中,各端的一些高度會(huì)有區(qū)別,為了方便就要統(tǒng)一放到全局變量中,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序無(wú)法獲取Vue.prototype值的解決方法,需要的朋友可以參考下2022-10-10巧方法 JavaScript獲取超鏈接的絕對(duì)URL地址
這篇文章主要為大家詳細(xì)介紹了一個(gè)非常巧妙的方法,JavaScript如何獲取超鏈接的絕對(duì)URL地址,感興趣的小伙伴們可以參考一下2016-06-06web網(wǎng)頁(yè)按比例顯示圖片實(shí)現(xiàn)原理及js代碼
由于上傳圖片的大小是未知的,在顯示成縮略圖的時(shí)候必須進(jìn)行按比例的縮放才能美觀地顯示,本文將為大家簡(jiǎn)單的介紹一種比較不錯(cuò)的方法,有此需求的朋友可以參考下2013-08-08echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getA
最近在開(kāi)發(fā)Echarts忽然遇到了個(gè)問(wèn)題,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下2023-01-01結(jié)合?ES6?類(lèi)編寫(xiě)JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結(jié)合ES6類(lèi)編寫(xiě)JavaScript創(chuàng)建型模式,本文開(kāi)始系統(tǒng)性的對(duì)20多種JavaScript?設(shè)計(jì)模式進(jìn)行簡(jiǎn)單概述,然后結(jié)合ES6類(lèi)的方式來(lái)編寫(xiě)實(shí)例代碼展示其使用方式,需要的朋友可以參考一下2022-07-07