問題描述

晚上幫舍友看了bootstrap里的問題，當(dāng)屏幕比較大的時候，一切正常，但當(dāng)屏幕縮小到一定的程度時候，使用柵格完成的部分覆蓋了柵格前面的div

矛盾點

bootstrap本來具有很好的響應(yīng)式，為什么在大屏的時候一切ok,但小屏?xí)鰡栴}。

問題解決

Q1:開始時覺得舍友的柵格沒有使用正確
A1:查看官網(wǎng)bootstrap的柵格使用后，發(fā)現(xiàn)是沒有問題的，開始在瀏覽器上一點點的調(diào)試，定位到問題是pull-left，當(dāng)寬度小于768px的后，問題就出現(xiàn)了.

Q2:pull-left 在小屏的時候?qū)傩詴龀瞿男└淖儯?br> A2: google搜索，在stackOverflow上發(fā)現(xiàn)，標(biāo)準(zhǔn)的bootstrap的 pull-classes在手機端上會失效，源碼如下：

@media(max-width:769px) {
  .pull-right {
     float:right!important;
  }
  .pull-left {
     float:left!important;
  }
}

解決辦法：手機端的時候需要手動的寫CSS樣式

反思

這是booystrap不好的一點設(shè)計吧，以前還沒遇見過如此奇葩的問題，這個坑得記住，經(jīng)驗積累吧。