转载。 https://blog.csdn.net/Mr_JavaScript/article/details/79677503
概括
一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。
关键字
1、col是column简写：列；
3、-* 表示占列数，即占每行row分12列栅格系统比；
4、.col-xs-* 超小屏幕如手机 （<768px）时使用；
解释
2、反推，如果我们要在移动端并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在PC端上显示6个div(12/6个=每个占2列 ) ，则 col-md-2。
实例
例一：单独使用
<div class="container"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 --> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">col-md-8</div> <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 --> </div> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-6">col-md-6</div> <div class="col-md-3">col-md-3</div> <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 --> </div> </div>
例二：混合使用
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">测试</div> <!-- 当屏幕尺寸： 小于 768px 的时候，用 col-xs-12 类对应的样式； 在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式； 在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；大于 1200px 的时候，用 col-lg-3 类对应的样式；-->
（完）转载于
---------------------
作者：蔚莱先森
来源：CSDN
原文：https://blog.csdn.net/mr_javascript/article/details/79677503