<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>CSS栅格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="bootstrap.css" rel="stylesheet" />
<style>
.row {
margin-bottom:20px;
}
.row .row {
margin-top:10px;
margin-bottom:0;
}
[class*="col-"] {
padding-top:15px;
padding-bottom:15px;
background-color:#eee;
background-color:rgba(86,61,124,.15);
border:1px solid #ddd;
border:1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<!--container-fluid:表示最宽显示-->
<div class="container">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<!--自适应换行-->
<div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<!--偏移-->
<div class="col-md-4 col-md-offset-4">col-md-4</div>
</div>
<!--嵌套标签-->
<div class="row">
<div class="col-sm-9">
one
<div class="row">
<div class="col-xs-8">
first
</div>
<div class="col-xs-4">
two
</div>
</div>
</div>
</div>
<!--列的排序-->
<div class="row">
<div class="col-md-9">col-md-9</div>
<div class="col-md-3">col-md-3</div>
</div>
<!--将上面的9列和3列排序-->
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
</body>
</html>
运行效果