先上点媒体查询css（某个著名的”段子“），跟bootstrap无关：
<html> <head> <style> body { background-color: white; } @media screen and (max- 960px){ body { background-color: red; } } @media screen and (max- 768px){ body { background-color: yellow; } } @media screen and (max- 550px){ body { background-color: green; } } @media screen and (max- 320px){ body { background-color: blue; } } </style> </head> <body> </body> </html>
保存以上文件为test.html, 然后用浏览器打开。缩放浏览器看效果。（ps：如果看不到任何效果，说明你的浏览器太老了，不支持css3）
再来说bs的布局：默认情况下，bs认为你是在为移动设备编写样式！
注意这句，但前提是，网页的head里要加这么一段：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
然后，就可以愉快的忽略上面css样式的问题。不用为了某个尺寸的设备写一大堆重复的代码。
当然， 必要时需要写少量代码，做某个尺寸设备的适配。配合 :
visible-lg/sm/md
hidden-xs/sm/md/lg
来动态显示，宽度比例的调整根据col-lg/md/sm/xs-1～12 来做。