問題描述

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

矛盾點

bootstrap本來具有很好的響應式，為什么在大屏的時候一切ok,但小屏會出問題。

問題解決

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

Q2:pull-left 在小屏的時候屬性會做出哪些改變？
A2: google搜索，在stackOverflow上發現，標準的bootstrap的 pull-classes在手機端上會失效，源碼如下：

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

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

反思

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