1、列偏移
这个其实很简单就是通过一个样式类，通过.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
<body class="container"> <div class="page-header"> <h1>案例:列偏移</h1> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> </body>
2、嵌套列
为了使用内置的栅格进行内容的嵌套，通过添加一个新的.row和一系列的.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套列所包含的列加起来应该等于12。
<body class="container"> <div class="page-header"> <h1>案例:列嵌套</h1> </div> <div class="row"> <div class="col-md-9"> Level 1: .col-md-9 <div class="row"> <div class="col-md-6"> Level 2: .col-md-6 </div> <div class="col-md-6"> Level 2: .col-md-6 </div> </div> <div class="row"> <div class="col-md-3"> Level 3: .col-md-3 </div> <div class="col-md-6"> Level 3: .col-md-6 </div> </div> </div> </div> </body>
首先定义了一个row,然后在此row中添加了一个.col-md-9的列，代表这个元素占有9列。
然后在这个占有9列的元素里面添加了两个不同的row。
即第一个row:将第一个row分成了两份，每份占有的6列，这12列，但是其总宽度和它外面的占有9列的元素的宽度是一样的。
第二个row:将第二个row分成了两份，第一份占有3列，第二份占有6列，然后剩余的3列没有进行填充。
3、列排序
通过使用.col-md-push-*（右移） 和 .col-md-pull-*（左移）就可以很容易的改变列的顺序。
<div class="page-header"> <h1>案例:列排序</h1> </div> <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> </div> <div class="row"> <div class="col-md-2 col-md-push-4">.col-md-2 .col-md-push-4</div> </div> <div class="row"> <div class="col-md-7"></div> <div class="col-md-5 col-md-pull-4">.col-md-5 .col-md-push-4</div> </div>
第一行被平均分成三份，每份占有四列。这一行主要是为了与下面两行进行对照的。
第二行里只有一个元素且是占有两列，然后对此元素也添加了.col-md-push-4的样式类。（让占有两个列的元素又向右移动了4列那么现在就是占据了第五列和第六列。）
第三列被分为两份，第一份占有七列，不过是空的，然后第二份占有五列，并且对此元素也添加了一个.col-md-pull-4的样式类，当然此类和上一行附加的类应该正好有相反的效果。（让占有5列的元素又向左移动了四列，原来是从第八列开始的，那么现在是从第四列开始的。）