版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/llayjun/article/details/78868085
介绍：
1. 注意:
bootstrap将每一行分成12份
媒体查询:
假如大屏幕,每行显示6个
超大电脑,屏幕分辨率>1200 使用: col-lg-2
假如屏幕小点,每行显示4个
992<屏幕分辨率<1200 使用: col-md-3
再小点,每行显示2个
768<屏幕分辨率<992 使用: col-sm-6
继续小,每行显示1个
屏幕分辨率<768 使用:col-xs-12
2. 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--增加移动端的条件 viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>哈哈</title>
<!--导入bootstrap的css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--导入jquery.js-->
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<!--导入bootstrap.js-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
</div>
</body>
</html>
3. bootstrap将每一行分成12份，然后更具屏幕的大小进行分割。
4. 效果图，
col-sm-4的效果图，这样分析，一共12份，sm是一个占4份，则会显示3个
col-xs-6的效果图，一共12份，xm是一个占6份，则会显示2个
