1.列嵌套
在一个列中嵌套一个或多个行。每一行依然遵守最大是12行的规则，多的另外起一行，在某一行中你可以占满12列也可以不占满12列，但不管怎样都遵守行规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列嵌套</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
div{
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
</style>
<body>
<p style="text-align: center;font-size: 30px">栏格布局-列嵌套</p>
<div class="container">
<div class="row">
<div class="col-sm-9">
第一层:col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">第二层:col-xs-8 col-sm-6</div>
<div class="col-xs-4 col-sm-6">第二层：col-xs-4 col-sm-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）,和设置margin的效果相同。来解决两个相邻元素需要去分开的一个途径，从而来代替margin，只需要在列元素里添加相应的类名，那么具有这个类名都会有这种效果
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>
3.列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
取值区间为为1~12。col-md-push-
将元素向右推
个列的宽度，col-md-pull-
将元素向左拉*个列的宽度。列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
</div>
版权声明：本文为Rock_clip原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。