pull-left

问题描述

晚上帮舍友看了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不好的一点设计吧，以前还没遇见过如此奇葩的问题，这个坑得记住，经验积累吧。