快捷導(dǎo)航

BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法

更新時(shí)間：2016年06月07日 14:58:02 作者：苗啟源

這篇文章主要介紹了BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

最近的一個(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è)后果也很嚴(yán)重，就是每個(gè)柵格之間的內(nèi)容都連在一起了，在內(nèi)部的柵格重新定義內(nèi)邊距和內(nèi)容居中即可解決)。