問(wèn)題描述
晚上幫舍友看了bootstrap里的問(wèn)題预吆，當(dāng)屏幕比較大的時(shí)候，一切正常盾剩，但當(dāng)屏幕縮小到一定的程度時(shí)候陌选，使用柵格完成的部分覆蓋了柵格前面的div
矛盾點(diǎn)
bootstrap本來(lái)具有很好的響應(yīng)式，為什么在大屏的時(shí)候一切ok,但小屏?xí)鰡?wèn)題肴甸。
問(wèn)題解決
Q1:開(kāi)始時(shí)覺(jué)得舍友的柵格沒(méi)有使用正確
A1:查看官網(wǎng)bootstrap的柵格使用后攒钳，發(fā)現(xiàn)是沒(méi)有問(wèn)題的，開(kāi)始在瀏覽器上一點(diǎn)點(diǎn)的調(diào)試雷滋，定位到問(wèn)題是pull-left不撑，當(dāng)寬度小于768px的后，問(wèn)題就出現(xiàn)了.
Q2:pull-left 在小屏的時(shí)候?qū)傩詴?huì)做出哪些改變晤斩？
A2: google搜索焕檬，在stackOverflow上發(fā)現(xiàn)，標(biāo)準(zhǔn)的bootstrap的 pull-classes在手機(jī)端上會(huì)失效澳泵，源碼如下：
@media(max-width:769px) {
.pull-right {
float:right!important;
}
.pull-left {
float:left!important;
}
}
解決辦法：手機(jī)端的時(shí)候需要手動(dòng)的寫(xiě)CSS樣式
反思
這是booystrap不好的一點(diǎn)設(shè)計(jì)吧实愚，以前還沒(méi)遇見(jiàn)過(guò)如此奇葩的問(wèn)題，這個(gè)坑得記住兔辅，經(jīng)驗(yàn)積累吧腊敲。
