Bootstrap栅格参数
跨设备组合定义
定义一行，在中等分辨率下是8:4，在超小分辨率下是6:6，在小分辨率下是3:6
<hr />
<div class="row">
<div class="col-md-8 col-xs-6 col-sm-3">8</div>
<div class="col-md-4 col-xs-6 col-sm-6">4</div>
</div>
运行结果：
这是在中等分辨率下，此时它是8:4
这是在超小分辨率下，此时它是6:6
这是在小分辨率下，此时它是3:6
也就是说，我们可以指定4种分辨率底下的比例模式。这个我们就叫做跨设备组合。
清除浮动clearfix visible-xs
1）首先我们先重新建一个demo04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo04</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="container">
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 </div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 </div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 </div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 </div>
</div>
</div>
</body>
</html>
运行效果：
在超小分辨率底下，前两个各占6格，后两个也各占6格，所以要排两列。44
在小分辨率下，第一个占3格，第二个占3格，第三个占3格，第四个也占3格，所以一行就可以排完了。
2）我们可以给它设置一个背景
<style type="text/css">
div{ border: 1px #101010 solid;}
#container{ width: 800px; margin: 10px auto;}
</style>
运行效果：
3）我们可以在第一行第一列添加内容。
运行结果：
第一个占了两行的位置，第一列的内容比较多，所以第三个没有从最左边排。
4）我们把第三列排到第一列的底下，就要在第三列前面加清除浮动。
“clearfix visible-xs”
“visible-xs”表示只在超小分辨率下才加清除浮动，其它分辨率底下不清除。
运行结果：
这样就回到了原始的排版方式
注意：一个container拆分成12个小格，当你给的格数大于12格就自动排到下面来了。
2840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
