三等分

显示等宽的三列,除了col-xs-*是一直水平排列,其余几种都是有一个宽度阈值,超过阈值的水平排列,小于阈值的从上往下列表排列。sm,md,lg的阈值分别为750px,970px,1170px。

.col-xs-4
.col-xs-4
.col-xs-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4

不等宽的三列

Bootstrap中每行总共分为12份,总的份数加起来不能超过12。

.col-xs-1
.col-xs-10
.col-xs-1
.col-sm-2
.col-sm-8
.col-sm-2
.col-md-3
.col-md-6
.col-md-3
.col-lg-5
.col-lg-2
.col-lg-5

两栏

分为两栏的样式。

.col-md-8
.col-md-4
.col-sm-4
.col-sm-6

单栏

单栏的样式,但是实际上单栏没有必要使用这种栅格化的布局。

.col-md-12
.col-lg-7

嵌套两栏

可以简单的把新的一行放在一列中。同样的宽度依然是分成了12份。

.col-md-8
.col-md-6
.col-md-6
.col-md-5
.col-md-4
.col-md-4

混合处理:手机和电脑

栅格化有4种大小:xs(phones),sm(tablets),md(desktops)和lg(larger desktops)。可以混合使用四种类型的class。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

混合处理:手机,平板,电脑

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Column clearing

去掉栏目的浮动,实际上就是保证当某一栏高度特别大而后面几栏特别高度特别小的时候,后面几栏依然能够保持同样的高度。下面是对比,改变屏幕宽度就能看出效果来。

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

偏移和列排序Offset, push及pull

通过col-push-*,col-pull-*和col-offset-*使columns偏移和排序。

.col-md-6 .col-md-offset-2
.col-md-4 .col-md-push-3
本来是第一个 .col-md-4 .col-md-push-6
本来是第二个 .col-md-4 .col-md-pull-3